shadcn.io is an independent project built on shadcn/ui
Installation
Overview
Let people book a place without a form with this fitness class card for React with React Aria. A hairline frame holds a Toggle Group of five days, Mon 12 to Fri 16 October, over that day's three classes as tiles between shared hairlines. A tile has a small drawn figure, the class name, its time and length, the instructor's initials in an Avatar and a spots-left meter. Book turns into "Booked" with a Cancel and takes a place, and the meter and the count follow. A full class offers "Join the waitlist", and once joined it says where you are on the list, "You are 3rd, in this demo". The tiles keep their boxes on every day and every state, and a polite status line says what changed. Nothing is booked or stored. On a phone the tiles stack. For studios, gyms and class-based businesses.
FAQ
How do I change the timetable?
Edit LINES. Each line is id|day|name|figure|time|minutes|initials|capacity|taken|waitlist. Dates are typed in DAYS, so the week is the same on every load.
How does the waitlist work?
A class whose taken places reach its capacity offers the waitlist instead of Book. The position is the typed number already waiting plus one, and the tile reserves that line so nothing moves.
Is there a live clock?
No. Times are typed and nothing reads the current date, so classes never count down or expire. A real timetable would disable past classes on the server.
What stays local, and how do I wire it for real?
Bookings and the waitlist are page state; nothing is stored, charged or sent. Replace the bodies of act with calls to your booking service.
