For AI Agents
Hand your agent this brief or the ReUI MCP, not a screenshot. Installs with a ReUI Pro or Ultimate license.
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 the Code Block component
- A closing signup or launch band that sells a product with no discount to redeem: use the CTA blocks
- A field where the shopper types a code and watches the order total drop: use the Shopping Cart blocks
Agent notes
handleCopyflips to Copied even whennavigator.clipboardis missing or the write rejects; add a fallback before you rely on it- Every page.tsx wraps the offer in a
min-h-svhmain; drop that wrapper when the offer sits inside an existing page - The
codevalue is a plain string copied as is; nothing validates it, applies it to an order or records a redemption
Markdown
https://web.dev.reui.io/blocks/ecommerce/coupon.mdMCP
search({ query: "coupon", type: "block", category: "coupon" })Shadcn Coupon Blocks: Promo Code Inputs and Discount Badges
A coupon field has four states and most shops ship one. These blocks ship all of them: idle, applying, applied with the saving shown, and invalid with a reason, plus the badge and banner that announce an offer before the cart.
All Coupon Blocks
Open any block on its own page for a live preview, the components it is built from, and the install command.
- Promo Code Hero Split promo hero with copyable coupon code, expiry, and campaign image
- Filterable Coupons Category-filterable coupon grid with one-click copy promo codes
- Member Early Access Hero coupon banner with copyable code and full-bleed image
- Offer Terms Card Coupon card with copyable promo code and discount offer terms
- Free Shipping Bar Full-width promo announcement bar with copyable discount code
- Flash Sale Bar Full-width dark promo bar with inline copyable discount code chip
What the Coupon blocks cover
eCommerce screens, each a full block with fixture data:
- Split promo hero with copyable coupon code, expiry, and campaign image
- Category-filterable coupon grid with one-click copy promo codes
- Hero coupon banner with copyable code and full-bleed image
- Coupon card with copyable promo code and discount offer terms
- Full-width promo announcement bar with copyable discount code
- Full-width dark promo bar with inline copyable discount code chip
Built from
All Shadcn Block Groups
Browse the full ReUI Shadcn blocks library by product surface. Each group bundles category-level blocks you can mix and match across your project.
- Shadcn Application Blocks (303) Browse 303 Shadcn Application blocks across 23 categories.
- Shadcn Data Grid Blocks (47) Browse 47 Shadcn Data Grid blocks across 9 categories.
- Shadcn Charts Blocks (52) Browse 52 Shadcn Charts blocks across 10 categories.
- Shadcn Solutions Blocks (76) Browse 76 Shadcn Solutions blocks across 11 categories.
- Shadcn AI & Agents Blocks (22) Browse 22 Shadcn AI & Agents blocks across 3 categories.
- Shadcn eCommerce Blocks (87) Browse 87 Shadcn eCommerce blocks across 13 categories.
- Shadcn Marketing Blocks (67) Browse 67 Shadcn Marketing blocks across 8 categories.
Frequently Asked Questions
Does the block validate codes?
It validates the shape locally and hands the code to your handler; the applied and invalid states render from the handler's answer.
How do I install a Coupon block?
Open the block on its page, copy the install command (the shadcn CLI with the @reui registry and your license key) or the AI prompt, and run it in your project. The block, its fixtures and every ReUI and shadcn dependency land in one command.
Is a license needed?
Coupon blocks are part of ReUI Pro: one payment, lifetime updates, every block in every style. The ReUI primitives and the free examples they build on install with no license.
Start building with ReUI Pro today.
Every Pro block, every style, and every future addition, with one license for unlimited projects.
Get All-Access
From $249, once. Lifetime updates.