shadcn.io is an independent project built on shadcn/ui
Installation
Overview
Let shoppers set up the watch before they buy with this smartwatch product card for React with React Aria. A hairline frame with a plus mark on each corner holds a round greyscale watch face drawn with three complication spots (top, left, right) and, in a side cell with its own divider, three native selects that choose Heart rate, Steps, Weather, Timer or None for each spot; the face redraws with a glyph and a typed value such as "72 bpm". A Segment Group sets the case size, 41 or 45 mm, and rescales the drawing, and three band chips (Sport loop, Leather, Steel link) change the drawn band. The price is the case plus the band, worked out in integer cents. The single Shine Button says "Add to bag" with the price and 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. Guides rule the bands. For product pages where the watch is configured on the card.
FAQ
How do I add a complication?
Add an entry to COMPLICATIONS with an id, a label and the typed value the face prints, then add a line to glyphPath for its icon. The selects list whatever is in the array, and the face reads the value from the same entry.
What happens if I pick the same complication twice?
The one that was on the other spot moves into the spot you just left, so the face never shows the same thing twice. None is allowed on any number of spots. The status line says what the face shows now.
How does the case size change the picture?
scaleOf returns a transform for the drawing: the 41 mm case is drawn at 88 percent of the 45 mm one. The price differs by the two constants CASE_41 and CASE_45, in cents.
How are the band chips built?
They are radio inputs inside a fieldset with a legend, styled through has-checked, so arrow keys move between them and a screen reader hears "Band" and the chosen name. Each band has an extra price in cents and a fill for the drawing.
What stays local, and how do I wire it for real?
The face, the size, the band 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 send the three spot ids with the order. The values on the face are typed; read them from the watch's own data.
