Gift Card Block React component
A digital gift card section: a live card preview that tilts with the pointer and updates as you type, four code-drawn designs, preset and custom amounts with limits, recipient, sender, send-now-or-later and a message, add to cart, plus a 'Check balance' tab.
About the Gift Card Block component
Gift Card Block sells digital gift cards with a preview that makes the gift feel real: the card shows the amount, the recipient and the sender as they're typed, tilts under the pointer, and switches between four designs.
Everything needed to send it sits on one form, from amount to delivery timing and a message, and a second tab lets people check the balance of a card they already have.
When to use it
Use it on a gift card page, in a holiday campaign, or as a section on the store homepage.
For fully custom cards with uploads and stickers use the Gift Card Designer.
Installation
Add the Gift Card Block component to your project with the shadcn CLI. It lands in components/gift-card-block.tsx as plain React + Tailwind CSS source you own and can edit.
npx shadcn@latest add @reactframe/gift-card-blockOr copy the source by hand and install its dependencies:
npm install motion clsx tailwind-mergeProps
<GiftCardBlock /> accepts 9 props, all optional.
| Prop | Type | Default |
|---|---|---|
| store | string | "Northline" |
| amounts | number[] | [25, 50, 100, 200] |
| min | number | 10 |
| max | number | 500 |
| currency | string | "$" |
| balances Demo balances for the balance checker: code → amount. | Record<string, number> | { "NL-4821-7730": 37.5, "NL-1100-2026": 100 } |
| onAddToCart | (order: GiftCardOrder) => void | Promise<void> | — |
| theme | "dark" | "light" | "dark" |
| className | string | — |
- storestringDefault: "Northline"
- amountsnumber[]Default: [25, 50, 100, 200]
- minnumberDefault: 10
- maxnumberDefault: 500
- currencystringDefault: "$"
- balances
Demo balances for the balance checker: code → amount.
Record<string, number>Default: { "NL-4821-7730": 37.5, "NL-1100-2026": 100 } - onAddToCart(order: GiftCardOrder) => void | Promise<void>
- theme"dark" | "light"Default: "dark"
- classNamestring
Collections
Use-case pages that compare Gift Card Block with the other components that do a similar job.
npm dependencies
Installed for you by the shadcn CLI.
Gift Card Block FAQ
- Are the designs images?
- No, they're gradients with small SVG patterns drawn in code, so they stay sharp at any size. Add your own entries to DESIGNS.
- How do I check real balances?
- Replace the timeout in check() with a call to your gift card API and set the result. The balances prop only powers the demo.
- What does 'On a date' do?
- It's passed as sendOn: 'later' in the order. Add a date picker in your copy if you schedule delivery on a specific day.
- How are custom amounts limited?
- Custom amounts must be between min and max; outside that range the field turns red and the add button explains why.
- Is it accessible?
- The preview is an image with a full text label, designs and send timing are radio groups, amounts are toggle buttons, fields have labels, and results and errors are announced.
