shadcn.io is not affiliated with official shadcn/ui
Lifetime Deal Billing Block for React
Stack lifetime codes to climb tiers: three code slots that check the XXXX-XXXX shape and refuse repeats, and a ladder of what one, two and three codes give (seats and storage) with your tier marked.
Installation
Overview
Let people who bought a lifetime deal redeem and stack their codes, with this redeem section for React with Base UI. A hairline frame with a plus mark on each corner holds three ruled code slots and a ladder. Each slot is an Input in a Field that checks the shape, four letters or numbers, a dash and four more; a wrong shape or a code already in an earlier slot gets a problem under the slot, and a good one says "Shape accepted". A table below shows what one, two and three stacked codes give (3 seats and 10 GB, 10 seats and 50 GB, unlimited seats and 500 GB) and marks the tier your valid codes reach. The only Shine Button counts them ("Redeem 2 codes") and sits in a foot with a status line. Codes are checked for shape only. Built with Field, Input and Guides. For screen recorders, design tools and anything sold as a lifetime deal.
FAQ
What does it check, and what does it not?
Only the shape: XXXX-XXXX in letters and numbers, upper-cased as you type, and that no two slots hold the same code. It cannot tell whether a code is real, used or expired. That is your server's job, so the demo says "checked for shape only" in its header.
How do I change the tiers?
LADDER at the top of the file has one entry per number of stacked codes with the seats and storage it gives, and SLOTS is the number of slots. The marked row, the count in the heading and the button's label are derived from how many slots hold a valid, new code.
What stays local, and how do I wire it for real?
Redeem only says "Redeemed. Nothing was saved." in the status line. In your app, send the valid codes to your server in redeem, mark a code as refused with the same problem slot when the server says it is used or unknown, and replace the ladder's marked row with the tier the account really holds.