Gift Card
Send a gift card: pick an amount or type one, write a note, preview the card face, and choose send now or on a date.
gift-card.tsxgift-card.css
Checking access…
Overview
Amount chips cover the common values with a custom field for the rest. The card face updates live with the amount, the recipient and the first line of the note.
Delivery is now or scheduled. The total line shows the amount plus any fee before checkout.
When to use
- Store gift flows, rewards redemption.
When not to use
- Balance checks: use a separate lookup.
Installation
$
pnpm dlx shadcn@latest add https://sundaeui.dev/r/gift-card.json$
npx shadcn@latest add https://sundaeui.dev/r/gift-card.json$
yarn dlx shadcn@latest add https://sundaeui.dev/r/gift-card.json$
bunx --bun shadcn@latest add https://sundaeui.dev/r/gift-card.jsonWorks in any React project. Files are written to components/sundae/. Read the source in the stage’s Code view. Pro assets need a personal token. See authenticated installs.
- No dependencies beyond React 18 or later.
- Copy gift-card.tsx and gift-card.css into components/sundae/.
- The CSS file is imported by the component, so no extra configuration is needed.
- Import the component and use it as shown below.
Usage
import { GiftCard } from '@/components/sundae/gift-card'
<GiftCard />Props
| Prop | Type | Default |
|---|---|---|
amounts*Preset amounts. | number[] | — |
brandName on the card. | string | — |
onContinueCalled with the gift details. | (g) => void | — |
fillSurface: dark or light. | 'dark' | 'light' | 'dark' |
Accessibility
- Amounts are a radiogroup; the custom field is labelled and validated.
- The card preview is decorative and mirrors the form fields.
- Reduced motion removes the movement and keeps every state change.
Customization
- Colours are CSS custom properties on .sd-gfc; override them in your own stylesheet.
- fill="light" switches the built-in light palette.
FAQ
- Is Gift Card free?
- Gift Card is part of Sundae Pro. The live preview is open to everyone; the source installs with a Pro account.
- How do I install Gift Card?
- Run npx shadcn@latest add https://sundaeui.dev/r/gift-card.json. The files are written to components/sundae/. It has no dependencies beyond React 18 or later.
- Does Gift Card support keyboard and screen readers?
- Amounts are a radiogroup; the custom field is labelled and validated. The card preview is decorative and mirrors the form fields.
- Does Gift Card respect reduced motion?
- Reduced motion removes the movement and keeps every state change.
More like this
All checkout →- Pro
Tender Checkout
Checkout · Refined - Pro
Currency Swap
Checkout · Refined Coupon Field
Checkout · Refined- Pro
Tip Selector
Checkout · Refined - Pro
Payment Methods
Checkout · Refined - Pro
Back in Stock
Checkout · Refined