# Shadcn Coupon blocks

> Coupon code input fields, discount badges, and promotional offer display blocks.

- Type: Pro blocks (eCommerce)
- Page: https://web.dev.reui.io/blocks/ecommerce/coupon
- Blocks: 6
- Installs with a ReUI Pro or Ultimate license; setup: https://web.dev.reui.io/docs/license-setup

## When to use

- A single sale or member offer: headline, a promo code to copy, expiry, fine print and a shop button
- A promotions page listing several codes, filtered by offer type, each with its own copy button
- A dismissible full width strip that announces one sale or shipping perk and its code

## When not to use

- A source snippet or terminal command shown with its own copy button: use [Code Block](https://web.dev.reui.io/components/code-block.md) (`get_component("code-block")`)
- A closing signup or launch band that sells a product with no discount to redeem: use the [CTA blocks](https://web.dev.reui.io/blocks/marketing/cta.md)
- A field where the shopper types a code and watches the order total drop: use the [Shopping Cart blocks](https://web.dev.reui.io/blocks/ecommerce/shopping-cart.md)

## Agent notes

- `handleCopy` flips to Copied even when `navigator.clipboard` is missing or the write rejects; add a fallback before you rely on it
- Every page.tsx wraps the offer in a `min-h-svh` main; drop that wrapper when the offer sits inside an existing page
- The `code` value is a plain string copied as is; nothing validates it, applies it to an order or records a redemption

## Blocks

- [Promo Code Hero](https://web.dev.reui.io/blocks/ecommerce/coupon/coupon-1.md): Split promo hero with copyable coupon code, expiry, and campaign image. Best for a sitewide sale on a shadcn Card, split between offer text and a campaign photo, under a destructive Limited time badge.
- [Filterable Coupons](https://web.dev.reui.io/blocks/ecommerce/coupon/coupon-2.md): Category-filterable coupon grid with one-click copy promo codes. Best for a filterable grid of 6 offers with category pills, a live result count and a copy button in each Frame footer.
- [Member Early Access](https://web.dev.reui.io/blocks/ecommerce/coupon/coupon-3.md): Hero coupon banner with copyable code and full-bleed image. Best for a members only early access offer inside a ReUI Frame, with an info badge and a 48 hour window in place of a date.
- [Offer Terms Card](https://web.dev.reui.io/blocks/ecommerce/coupon/coupon-4.md): Coupon card with copyable promo code and discount offer terms. Best for a narrow imageless offer card with min spend beside the expiry, a 3 line terms checklist and a shop button.
- [Free Shipping Bar](https://web.dev.reui.io/blocks/ecommerce/coupon/coupon-5.md): Full-width promo announcement bar with copyable discount code. Best for a muted strip with a border above and below for a standing shipping perk, a truck icon and an outline copy button.
- [Flash Sale Bar](https://web.dev.reui.io/blocks/ecommerce/coupon/coupon-6.md): Full-width dark promo bar with inline copyable discount code chip. Best for an inverted strip in the foreground color for a weekend sale, with a lightning bolt icon and a copy button in the page color.

Every ReUI item has a twin like this one; the index is https://web.dev.reui.io/llms.txt. Agents with the ReUI MCP (https://web.dev.reui.io/docs/mcp) get the same guidance from the getters named above.