shadcn.io is not affiliated with official shadcn/ui
Gift Card Dialog Block for Svelte
A café's gift cards page with its builder dialog shown open: a card drawn in greys that reads as you build it, preset or custom amounts, three printed patterns, a recipient and a message, and delivery now or on a day picked in an inline calendar.
Installation
Overview
Let people give a gift card they have designed, with this gift-card dialog for Svelte with Ark UI. It opens from the gift cards page of Cuppery, a neighbourhood café: the page's header holds an outline Buy a gift card Button, and the café's menu board and a cart chip are drawn under a soft scrim inside a hairline frame with a plus mark on each corner. The dialog is a builder. At the start a card drawn in greys is pinned and reads as you build it: the café's name, the amount, who it is to, the message, all over the printed pattern you chose, with the total and when it goes under it. At the end a Toggle Group takes the amount, $15, $25, $50 or a custom whole number from $5 to $200, a second one takes the pattern (beans, steam or stripe, drawn with gradients, no pictures), then come the recipient's name and email, a message with a counter, and a Segment Group for Send now or Pick a date, which opens an inline Calendar that closes every day up to the one the block treats as now. Add gift card, the only Shine Button, checks the form, queues one card and the cart chip behind the dialog counts it. For preview the dialog is drawn open in place when the page loads; the header button opens the real Dialog, with the same card and the same state. For cafés, shops, restaurants and any business that sells a present.
FAQ
Why is the dialog already open, and what do I keep?
So you can see it without a click. On load the dialog is a copy drawn in place over the page: a native dialog element that isn't modal, so nothing is trapped, hidden or focused, and the page around the preview keeps working. The Buy a gift card button opens the real Dialog, modal, with its focus trap, Escape and focus return, and the copy stays closed until a reload. Both show the same GiftFields component and share the block's state, so a name typed or a pattern chosen in the copy is there in the real one. In your app keep the Dialog and drop the copy: the "in-place" state, the scrim and the dialog element inside the frame.
How is the card drawn, and can I use real artwork?
The card is a box in the theme's greys with the pattern painted behind its text by a CSS gradient: beans are a tiled oval, steam is arcs rising from the foot, stripe is a diagonal hatch. They live in PATTERNS as class names, so a new pattern is one entry. To print real artwork, put an image behind the same text and keep the text over a solid band so it stays readable. The card repeats what the fields say, so screen readers skip it and read the fields.
What are the rules for the amount?
A preset is always good. Custom turns the number field on and moves focus into it; it must be a whole number from $5 to $200 (LOWEST and HIGHEST), checked when you press Add gift card, with its own message under the field, and the card and the total show dashes until the number is good. The field is always on the page, only switched off until you choose Custom, so choosing it moves nothing.
How does the delivery date work?
Send now says "Right away". Pick a date opens the calendar, shown as it would be on the day the block treats as now (AS_OF), with that day and every earlier day closed, whatever the visitor's own clock says; pressing Add gift card without a day says so under the calendar. The calendar is the catalog's own, inline in the dialog rather than a popup, which keeps it working inside a modal on every library. In your app disable days from your own cut-off, and let your server enforce it.
Does it charge anything or send the email?
No. Add gift card queues one card in the block's state, the polite status message says so ("queued, in this demo. No email goes out and nothing was charged.") and the cart chip behind the dialog counts it. In your app create the card on your server in add, send the email on the delivery day from there, and take payment through your payment provider; show a failure in the field it belongs to, with the dialog still open.
Is it accessible from the keyboard?
Yes. The real dialog is named by its title and described by its sentence, focus starts at the first choice and stays inside until it closes, and Escape, Cancel and the close button all return focus to Buy a gift card. The trigger is the button wrapped in DialogTrigger with asChild, and the dialog is controlled with open and onOpenChange. The amount and pattern are groups you move through with the arrow keys, each field's message is tied to it with aria-describedby, the message counter is for the eyes while the field announces its limit once, and one polite status message reports the result. The copy shown on load moves no focus; Escape inside it, Cancel and its close button close it and put focus on the header button.