shadcn.io is an independent project built on shadcn/ui
Installation
Overview
Help riders pick a frame with this bicycle product card for React with Radix UI. Four drawn frames sit in a row, each taller than the last, from Small to Extra large, with the heights each one suits. A Slider named "Your height" runs from 150 to 200 cm; the frame whose typed range holds the height is ringed and tagged with a Badge, and the verdict reads "Medium, for 168 to 178 cm" with the neighbouring sizes and a stand-over note. One Shine Button adds the bike and a ghost Button "Book a test ride" answers in words. Guides rule the bands. Add turns into "Added" with an Undo, the heading row's "Bag" count follows and a polite status line says what changed. Nothing is stored or bought. For bikes, helmets, ski gear and anything sold by body size.
FAQ
How do I change the frames and ranges?
Edit FRAMES: each has a name, the shortest and tallest rider it suits in centimetres and a stand-over height. The slider's range, the ringed frame and the neighbour sentences follow from those numbers.
Where does the inseam figure come from?
It is 45% of the height, rounded, as a rule of thumb for the note only. The frame is chosen from height alone. Replace inseamOf with a measured value if you ask for one.
Does Book a test ride book anything?
No. It answers in the status line that test rides are not booked in this demo. Point it at your booking page or open a dialog.
What stays local, and how do I wire it for real?
The height and the bag are page state; nothing is stored, charged or sent. Replace the body of add and undo with calls to your cart, and save the height with the customer's profile if you want it remembered.
