shadcn.io is not affiliated with official shadcn/ui
Digital Product Checkout Block for Radix UI
A design kit sold under three licences as radio cards, with a three-row table of what the chosen licence allows, a side cell listing the files, key, updates and instant delivery, and an email for the receipt.
Installation
Overview
Let people pick a licence and see what they get before they pay, with this digital product checkout for React with Radix UI. A compact header from Pelham Press, a seller of design templates, sits over a narrow hairline frame with a plus mark on each corner. Three licences (Personal $29, Studio $79 for five seats, Extended $199) are radio cards; the chosen one fills a table of three rows (client work, commercial use, reselling or sharing) with a tick or a dash and the words, and the price follows it. A side cell, "After you pay", lists the files with their sizes, says the licence key is shown once payment clears, that updates are free for twelve months and that delivery is instant. An email Input in a Field takes the receipt address and Pay names a wrong one. Pay is the only Shine Button; the foot states the total and the result, and Undo takes the purchase back. It's built from Field, Input, Button, Shine Button and Guides, with a CSS entrance only. For templates, fonts, software, plugins and anything delivered as a file.
FAQ
How does the licence change the page?
The radio cards set the price, the three use rows and the Pay button's amount together. Studio allows client work and commercial use for up to five designers; Extended adds the right to ship the kit inside a product you sell, but never as a template; Personal covers your own projects only. The table is always three rows, so the page does not move when you switch.
What does instant delivery mean here?
That the files and the licence key come the moment payment clears, as a link on the receipt page and in the email. In this demo nothing is generated, sent or downloaded: the side cell describes what a real store would do, and the status line after Pay says the files and key would go to the email you typed.
What does the email check do?
It checks the shape of the address, nothing more. It shows a problem after you leave the field with something wrong, or when you press Pay, and the problem has a reserved line so the form does not move. A wrong email stops Pay and moves focus to the field.
How does the keyboard work?
The licences are one group of native radios: Tab to the group and use the arrow keys to change the choice. The email is a normal field, and Pay submits the form with Enter.
What changes on a phone?
The licence cards stack, the table drops its extra width, and the side cell goes under the form, so the delivery list reads after the choice. The foot is pinned to the bottom of the screen.
What stays local, and how do I connect it for real?
Everything: the licences, files and prices are typed at the top of the file and the result is a piece of state. Nothing is charged or sent. To connect it, create the order on your server when the form is submitted, take the payment with your provider's hosted fields, and generate the key and the signed download links after the payment succeeds.