Coupon Code Block React component
A discount code card: type a code (validated with a spinner, shaking with a clear message when invalid or below its minimum spend) or pick one of the available coupon tickets, with a 'Best value' tag, locked coupons that say how much more to add, an applied ticket with a confetti pop, and totals that count down.
About the Coupon Code Block component
Coupon Code Block takes the guesswork out of discount codes. People can type a code or simply tap one of the coupons they're eligible for, and the best one right now is marked so nobody has to do the math.
When something doesn't work, the message says exactly why, including how much more to add for a minimum-spend coupon. A successful code turns into a ticket with a small celebration, and the total counts down to the new price.
When to use it
Use it in the cart, the checkout summary, or a 'my offers' section of an account page.
For the full order review use the Order Summary Block; for an automatic offer use the Cart Offer Modal.
Installation
Add the Coupon Code Block component to your project with the shadcn CLI. It lands in components/coupon-code-block.tsx as plain React + Tailwind CSS source you own and can edit.
npx shadcn@latest add @reactframe/coupon-code-blockOr copy the source by hand and install its dependencies:
npm install motion clsx tailwind-mergeProps
<CouponCodeBlock /> accepts 8 props, all optional.
| Prop | Type | Default |
|---|---|---|
| subtotal | number | 168 |
| shipping | number | 12 |
| coupons | { code: string; label: string; kind: "percent" | "fixed" | "shipping"; value: number; minSpend?: number; expires?: string }[] | COUPONS |
| currency | string | "$" |
| onValidate Validate a typed code. Return the coupon or null. Defaults to looking it up in coupons. | (code: string) => Coupon | null | Promise<Coupon | null> | — |
| onApply | (coupon: Coupon | null) => void | — |
| theme | "dark" | "light" | "dark" |
| className | string | — |
- subtotalnumberDefault: 168
- shippingnumberDefault: 12
- coupons{ code: string; label: string; kind: "percent" | "fixed" | "shipping"; value: number; minSpend?: number; expires?: string }[]Default: COUPONS
- currencystringDefault: "$"
- onValidate
Validate a typed code. Return the coupon or null. Defaults to looking it up in coupons.
(code: string) => Coupon | null | Promise<Coupon | null> - onApply(coupon: Coupon | null) => void
- theme"dark" | "light"Default: "dark"
- classNamestring
Collections
Use-case pages that compare Coupon Code Block with the other components that do a similar job.
npm dependencies
Installed for you by the shadcn CLI.
Coupon Code Block FAQ
- How do I validate codes on my server?
- Pass onValidate. It receives the uppercase code and should return the coupon object (or null). The spinner shows until it resolves.
- How is 'Best value' chosen?
- Among the coupons the cart qualifies for, the one with the largest saving on the current subtotal and shipping gets the tag. It hides once a coupon is applied.
- Can more than one code be applied?
- This block applies one at a time, which matches most stores. Applying a new one replaces the current code.
- What coupon types are supported?
- percent (off the subtotal), fixed (a fixed amount, never more than the subtotal) and shipping (makes shipping free).
- Is it accessible?
- The input has a label and is linked to its error, errors use role=alert, the applied ticket is a status region, and each coupon button names the code it applies.
