# salla-tiered-offer (https://docs.salla.dev/twilight/react/web-components/salla-tiered-offer)



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

Progress widget for a store's tiered discount offer: it shows the customer's current tier, a progress bar with a milestone for each tier, and a tab per tier with its discount. Use it in the cart page.
It takes no props. It reads the offer of type `tiered_offer` from the cart offers API and refreshes on every `cart::updated` event.
It renders nothing unless all of these hold: the store has the `tiered-offer` feature, the cart has items, a tiered offer exists, and the customer is logged in. It is also hidden when a coupon is applied and the offer does not allow coupons, and when the offer is set to hide until the first tier is reached and the customer has not reached it.

## Use it [#use-it]

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

```tsx
import { SallaTieredOffer } from '@salla.sa/twilight-components-react/tiered-offer';
```

**Client-only.** On the server this wrapper renders a placeholder (a skeleton, or nothing), and the real component mounts in the browser. Do not rely on it for content that search engines must see.

## Example [#example]

```tsx
import { SallaTieredOffer } from '@salla.sa/twilight-components-react/tiered-offer';

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

```html
<salla-tiered-offer></salla-tiered-offer>
```

## Related [#related]

Renders: [`<salla-skeleton>`](https://docs.salla.dev/twilight/react/web-components/salla-skeleton).