# salla-wishlist-summary (https://docs.salla.dev/twilight/react/web-components/salla-wishlist-summary)



{/* Generated by scripts/sync-web-components.mjs from the components docs.json. Do not edit by hand. */}

A heart icon link to the account wishlist page, with a badge showing how many products are in the wishlist.
Place it in the header next to `salla-user-menu` and `salla-cart-summary`, not inside the account dropdown.

It is rendered hidden for guests, and for stores whose plan is not `basic` or `plus`. The count updates
when products are added to or removed from the wishlist.

## Use it [#use-it]

In HTML or JSX, use the tag `<salla-wishlist-summary>` with the **Attribute** names below. In React, the wrapper takes the **Property** names (camelCase).

```tsx
import { SallaWishlistSummary } from '@salla.sa/twilight-components-react/wishlist-summary';
```

## Example [#example]

```tsx
import { SallaWishlistSummary } from '@salla.sa/twilight-components-react/wishlist-summary';

export function Example() {
  return (
    <SallaWishlistSummary />
  );
}
```

```html
<salla-wishlist-summary></salla-wishlist-summary>
```