shadcn.io is not affiliated with official shadcn/ui
Gift Subscription Pricing Block for React Aria
A gift page for a subscription: pick 3, 6 or 12 prepaid months, add the recipient, a message and a delivery date, and watch the gift card they'll get redraw as you type.
Installation
Overview
Let customers buy your product for someone else with this gift page for React with React Aria. A compact header names the offer, and below it one ruled panel holds the whole gift. On the left a form: three length choices (3, 6 or 12 months at prepaid prices, each showing its price per month and what it saves, with the longest tagged "Best value"), the recipient's first name and email in Field and Input, an optional message in a Textarea with a character count, and a delivery choice, today or on a date picked in a native date input. On the right, the gift card the recipient will get, drawn from the form as it's filled: the months in display size, who it's for, the message and the arrival day, with a short price breakdown and a Shine Button that names the total ("Buy the gift · $72"), the section's only primary element. Mistakes are named under the field, and a valid order swaps the price for a confirmation that takes focus. On a phone the card follows the form and the total and button ride a sticky bar. The section sits on the page's lines, drawn by Guides: side rails, a rule along its top, and the panel's rules with a + at each crossing. Built with Field, Input, Textarea, Badge, Button, Shine Button, Guides and Lucide icons, with CSS transitions only. For audiobook, streaming, learning and any consumer subscription that people give to each other.
FAQ
How do I change the gift lengths and prices?
Edit LENGTHS at the top of the file: each entry is a number of months and the price of the whole gift in dollars. MONTHLY is the plan's regular monthly price. Everything else is computed from those: the price per month, the amount saved and its percentage on each choice, the breakdown and the total. Rounding happens in whole cents, so the lines always add up. BEST_MONTHS picks which length carries the "Best value" tag.
Where does the payment happen?
In your own checkout. The button is a submit button for the form: it checks the fields and, when they're valid, calls submit. The comment there marks the spot to create your payment session (a hosted checkout, a payment element) with the length, the recipient, the message and the delivery date, then send the buyer to pay. As shipped, submit shows the confirmation panel so the flow can be tried. The button is the only primary element on the page.
How does the delivery date work?
The visitor's today is read in an effect once the page runs in their browser, never while rendering, so the prerendered page can't show the server's day. The date input's earliest date is that day and it opens a week ahead. The card says "Arrives today" or "Arrives" and the day, formatted in the visitor's language. Send the chosen date as a plain YYYY-MM-DD and schedule the email in your own time zone rules; the block doesn't send anything.
What does it check, and is it accessible?
It checks that the first name has at least two characters, that the email looks like an email and that a date, when chosen, isn't in the past. The form has noValidate so the messages are ours: each sits under its field, is tied to it with aria-describedby and aria-invalid, and the first problem takes focus. The length and delivery choices are native radio groups inside fieldsets with legends, so arrow keys and screen readers work as they do everywhere. A polite status line reads the length, total and arrival whenever they change.
How does it look on a phone?
Below the lg breakpoint the panel is one column: the form, then the gift card and the price breakdown. The three lengths become rows with the price on the right, and the panel's own button is hidden. A sticky bar stays at the bottom of the screen with the chosen length and the "Buy the gift" button naming the total, so there is one primary button on screen at a time. The bar goes away once the order is confirmed.
Can the gift card use my brand?
Yes. It's built from tokens and follows your theme, light or dark. It stands out as a raised card (bg-card, a shadow and a hairline ring) rather than by colour: a faint glow and three hairline rings around one corner, with a Lucide icon beside the wordmark. Swap the icon and the word "Cadence" for your own mark, or lay your artwork in the card behind the -z-10 layers. The message is clamped to its reserved lines, so a long note can't change the card's height.