shadcn.io is an independent project built on shadcn/ui
Installation
Overview
Let fans pick where they sit before they pay with this concert ticket card for React with React Aria. A hairline frame holds a seating chart at the start: a stage, then the floor, the lower bowl and the upper bowl as widening bands, each a native radio showing its name, price and seats left. The chosen zone fills the side cell with a large price, a plain description ("Standing, closest to the stage") and a "Few seats left" badge when twenty or fewer remain. A stepper takes up to 8 tickets, capped by the seats left, and a description list adds a 15 percent fee, rounded to whole cents, to the total. One Shine Button holds the tickets and turns into "Held" with an Undo. For concert halls, theatres, stadium tours and any venue with priced zones.
FAQ
How do I change the zones and prices?
Edit the ZONES array at the top of the file: each zone has an id, a name, a price in integer cents, the seats open, a detail line and a width class for its band. The fee is FEE_PERCENT, and the fee in cents is rounded once in feeOf, so the lines always add up to the total.
Is the chart an image?
No. It is HTML: the stage is a shaped block and each zone is a label around a native radio, so every zone has a real name, a real focus ring and works with arrow keys. There is nothing to map from pixels to seats.
Can people pick exact seats?
No, this card sells by zone. To choose seats, replace the side cell with your seat map once a zone is chosen and keep the zone radios as the first step.
What stays local, and how do I wire it for real?
The prices, the seats and the hold are typed or page state, and nothing is stored, charged or sent. Replace ZONES with your inventory and the body of hold with a call that reserves the seats.
