shadcn.io is not affiliated with official shadcn/ui
Zoom Focus Master Detail Features Block for Solid
A features section for a design-token system: a framed panel at full size beside six vertical tabs that are its own thumbnails; choosing one scales the panel up from that row.
Installation
Overview
A features section for Solid with Ark UI, built as a zoom-in master-detail. At the start of the block a framed panel shows one part of a design-token system at full size, with its name, a sentence and a chip that reads "Focused: Color, 1 of 6"; at the end a column of six vertical tabs lists the parts (color, type, space, motion, icons and components), each tab a thumbnail that is the same drawing shrunk to a few pixels. Choosing a thumbnail opens its panel, which scales up from the row you chose. A divider that meets the page's top rule with a plus mark separates the two sides. It's built from Tabs, Badge and the Guides line kit, with your theme's tokens for every colour and no button. For design systems, theming tools and any product whose parts are best judged by looking at them.
FAQ
How do I change the parts and their drawings?
The six parts are small objects at the top of the file (a name, a number, a sentence and where the thumbnail sits in the column), and each has a drawing component beside them (ColorDrawing, TypeDrawing and so on). The drawings are fluid, so the same component fills the large panel and, shrunk by CSS zoom, the thumbnail; swap one for your own and pass it to its tab and its panel. The drawings are decoration, hidden from assistive technology, and the panel's heading and sentence say the same in text.
How does the panel grow from its thumbnail?
Each panel is a figure whose transform origin is set from a CSS variable: the vertical place of its thumbnail in the column, and the side of the block the column is on (it flips in a right-to-left layout). When a tab opens, the panel mounts at 90% scale and eases to full size, which is one CSS transition and no script. With reduced motion it simply appears.
How does it work from the keyboard?
Tab enters the column on the open part, the Up and Down arrows move between parts and open each as they go, and Tab again moves into the panel. Home and End jump to the first and last part. The thumbnails and the panel's drawing are hidden from the keyboard and screen readers: a tab is named by its text ("Color", "01").
How does it fit on a phone?
The column becomes a row of six tiles above the panel (it scrolls sideways when the screen is narrower than the row), and the panel opens from the top. The panel's heading and its chip name the open part, and the drawings are shorter. Nothing scrolls the page sideways at 320 pixels.