Gift Card Designer React component
A gift card builder with a live 3D preview that tilts with the pointer and flips to show the message side: six card designs, preset or custom amounts with limits, to, from and recipient email, a 140-character message in three letterings, send now or on a date, and an add-to-cart button that confirms.
About the Gift Card Designer component
Gift Card Designer lets shoppers make a gift card feel personal before they buy it: they pick a design, an amount, who it's for and what it says, and watch a card-shaped preview update as they type.
The preview tilts with the pointer and flips over to show the message side in the lettering they chose, so they see both faces of what the recipient will get. Delivery can be immediate or scheduled for a date, and the add button confirms with the amount and the name.
When to use it
Use it on a dedicated gift card page or as a gift option in the holiday season, when people want something that looks thought-through rather than a plain code.
If you only sell fixed amounts with no message, a simpler gift card block with a balance checker is enough.
Installation
Add the Gift Card Designer component to your project with the shadcn CLI. It lands in components/gift-card-designer.tsx as plain React + Tailwind CSS source you own and can edit.
npx shadcn@latest add @reactframe/gift-card-designerOr copy the source by hand and install its dependencies:
npm install motion clsx tailwind-mergeCollections
Use-case pages that compare Gift Card Designer with the other components that do a similar job.
npm dependencies
Installed for you by the shadcn CLI.
Gift Card Designer FAQ
- What gets passed to onAdd?
- The design id, the amount (preset or custom), recipient name and email, sender name, the message, the lettering (sans, serif or hand) and deliver, which is "now" or a YYYY-MM-DD date. Store them as line item properties and send the email from your backend.
- How are custom amounts checked?
- Other amount only takes digits and must fall between min and max; outside that range the field turns red with the allowed range. Preset buttons clear the custom field.
- Can I add my own designs?
- Yes. Each design is a CSS background (gradients, patterns or an image url) plus the ink colour for text on it, so brand artwork drops straight in.
- Why does the card flip on its own?
- Focusing the message or changing the lettering turns the card to its back so the shopper sees the message as they write it; changing the design or amount turns it to the front again.
- Is it accessible?
- Designs, letterings and delivery are radio groups, amounts use aria-pressed, every field has a label, the hidden side of the card is aria-hidden, the remaining-characters count is visible next to the label and the add confirmation is announced.
