shadcn.io is an independent project built on shadcn/ui
Installation
Overview
Turn the watch over with this luxury watch product card for Svelte with Ark UI. A hairline frame with a plus mark on each corner holds one centred, narrow card: a greyscale mechanical watch, a Toggle Group with two items, Dial and Caseback, and a details list. Pressing Caseback crossfades the drawing from the dial (twelve indices and two hands) to the movement (a rotor, eight jewels and an engraved number), and the list swaps from Case (40 mm steel, sapphire crystal, 100 m) to Movement (automatic, 31 jewels, 70 h reserve) without the card changing height. The single Shine Button says "Add to bag" with the price and turns into "Added" with an Undo; a polite status line says what changed. Nothing is stored or bought. For product pages where the back of the object matters.
FAQ
How does the turn-over work?
Both sides are drawn in one grid cell and only their opacity changes, with a 500 ms fade. Under reduced motion the change is instant. The side that is not shown is hidden from assistive technology.
Why doesn't the card change height?
Both details lists sit in one cell, so the cell is as tall as the taller one. The hidden list is invisible and marked aria-hidden, so it adds no clutter for a screen reader.
How does the Dial and Caseback control work?
It is a toggle group where one item is always pressed. Arrow keys move between the two and Space or Enter presses one; the status line says which side is showing.
Can I change the engraving?
Yes, it is the string in Face. In a real project keep it short; long text on a small caseback is hard to read.
