shadcn.io is not affiliated with official shadcn/ui
Concert Tickets Music Block for Ark UI
Four seating categories as radio rows with face value and the all-in price, a capped quantity stepper, a delivery select and a ledger that ends in an exact-cents split between up to six people.
Installation
Overview
Show the price of a night out with every fee in it, with this concert-ticket order for React with Ark UI. Entryway, a ticketing site, sells Marlow Quay at Harbourlight Arena in a hairline frame with a plus mark on each corner: four seating categories (Floor standing, Lower bowl seated, Upper bowl, Step-free seated) as native radio rows, each with its face value, how many remain and the price with the service fee and the facility charge already in it. A quantity stepper is capped by the order limit and by what remains, and says the cap in words; a Native Select adds delivery. At the end, the order is a ledger: face value, a 12% service fee, a $3.50 facility charge on each ticket, delivery and a total in a Sliding Number. Under it, "Split between" shares the total among up to six people with the odd cents handed out one each, so the shares add up to the total to the cent. There is no seating chart. Reserve tickets is the only Shine Button. It's built from Native Select, Sliding Number, Button, Shine Button, Field and Guides, with a CSS entrance only. For gigs, theatres and any sale where the final price matters.
FAQ
How do I add my own categories and prices?
Edit CATEGORIES: each has an id, a name, a note, its face value in cents (face) and how many remain (stock). FEE_PERCENT, FACILITY and DELIVERIES hold the rest of the price. The radio rows, the cap on the stepper, the ledger and the split are all drawn from those, so nothing is typed twice.
How is the all-in price worked out?
Every figure is a whole number of cents. The service fee on one ticket is the face value times 12%, rounded half up; the all-in price is the face value, that fee and the $3.50 facility charge. The ledger multiplies each part by the quantity and adds delivery once. usd is the only place cents become dollars.
How does the split keep the cents exact?
The total is divided by the number of people and rounded down; the cents that remain are handed out one each to the first people, so with three people and $159.32 the shares are $53.11, $53.11 and $53.10. A line under the shares adds them up and says they match the total. Only the first N shares are shown, and the rest keep their space, so the panel never changes height.
What happens at the quantity cap?
The cap is the smaller of six and what remains in the chosen category. Pressing more at the cap does not add a ticket; the status line says why ("Only 6 remaining in Step-free seated."). Changing to a category with fewer remaining lowers the quantity and says so. The plus and minus buttons stay in the tab order with aria-disabled, so the explanation can be reached by keyboard.
What stays local, and how do I make it real?
Everything. Reserve tickets only writes a sentence ("Held in this demo. Nothing was charged.") and no seats are held anywhere. To make it real, send the category, the quantity and the delivery to your server, hold the seats there, and return the price you computed so the page shows the server's number; take payment in your payment provider's hosted fields, never in this form.