shadcn.io is not affiliated with official shadcn/ui
Spotlight Ring Gallery Block for Ark UI
A watch reseller's gallery: eight round dials stand in a ring around one large dial, and choosing a dial, by pointer or with the arrow keys that turn round the ring, brings it to the centre.
Installation
Overview
A ring of thumbnails for React with Ark UI. Eight round watch dials stand around a large centre dial, inside a framed figure with a faint plan grid (circles and a crosshair) and + marks on its corners. The ring is a radio group named "Dials": click or tap a dial, or use the arrow keys, which turn the choice round the ring and wrap from the last dial to the first, and the chosen dial takes the centre. Under the ring, a caption gives its name, reference, case, movement and price, and a polite line names the dial for screen readers. Below md the ring flattens to a row of thumbnails you swipe, under the centre dial. The watches are drawn in the theme's greys, never photographed. The page's rails and top rule come from the Guides spine. It's built from Guides alone, with native radio buttons for the ring and CSS transitions for the entrance and the fade. For product ranges, colourways and any set of alternatives that deserve a stage of their own.
FAQ
How is the ring laid out?
Each dial's position is computed once, at module scope, from its index: a point on a circle of 38% of the box, written as two CSS variables (--x and --y) that the thumbnail uses for start and top. The box is a square that scales with its container, so the ring stays a ring at any width from 768 pixels up, and in a right-to-left layout it mirrors, with the first dial still at the top. Add or remove watches in WATCHES and the ring spaces itself out; keep it to about eight so the thumbnails don't touch.
Which keys work, and what does a screen reader hear?
The ring is a native radio group, so Tab goes to the chosen dial, the arrow keys move to the next or previous one and choose it, and the choice wraps. Each dial is named by its model name, and a polite line announces "Capstan Dive, 3 of 8" when the choice changes. In a right-to-left layout the browser reverses the arrows to follow the reading direction.
How do I use my own photographs?
The drawn dials are one Scene component. Where the code comment says so, replace it with an <img> (object-cover, in a square) in both the centre and the thumbnails, and add a src to each entry of WATCHES. The thumbnails are round crops, so keep the subject in the middle of the picture.
Does the layout move when I choose a dial?
No. The ring box is a fixed square, the centre dial has a fixed size, and the caption's sentence reserves two lines, so only the pictures and the words change. The centre dial fades in over 300 ms, and not at all with reduced motion.