## Gift Card (S—281)

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.

- URL: https://sundaeui.dev/components/gift-card
- Category: Checkout & payments · Art direction: Refined
- Access: Sundae Pro (authenticated install)
- Stack: React 18+, TypeScript, plain CSS; dependencies: none
- Install: `npx shadcn@latest add https://sundaeui.dev/r/gift-card.json`
- Tags: voucher, gift, send, checkout, gift-card, ecommerce

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.

### Usage

```tsx
import { GiftCard } from '@/components/sundae/gift-card'

<GiftCard />
```

### Props

- `amounts` (`number[]`, required): Preset amounts.
- `brand` (`string`): Name on the card.
- `onContinue` (`(g) => void`): Called with the gift details.
- `fill` (`'dark' | 'light'`, default `'dark'`): Surface: dark or light.

### When to use

- Store gift flows, rewards redemption.

### When not to use

- Balance checks: use a separate lookup.

### 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.