shadcn.io is not affiliated with official shadcn/ui
Layout Picker Radio Form Block for Svelte
A default project view picker with four radio tiles (list, board, calendar, timeline), each with a drawn thumbnail, and the chosen view redrawn large in a framed preview with what it is best for.
Installation
Overview
Let people see a layout before choosing it with this visual radio form for Svelte with Ark UI. A compact header sits over a hairline frame with a plus mark on each corner, in two cells. The first holds a required choice of four views (List, Board, Calendar and Timeline) as a two-by-two grid of tiles on shared hairlines; each tile is one whole label with a greyscale thumbnail drawn from typed shapes, a title and a line. The second is a side cell with a framed figure that redraws the chosen view large, with a caption that says what the view is best for; on a phone it stacks under the tiles. The radios are native, so the arrow keys move the choice, and the chosen tile is ringed in the foreground color. The foot holds the Shine Button to set the default, quiet until the pick differs from the saved view, beside an outline Button to discard. It's built from native radios, Button, Shine Button and Guides, with a CSS entrance only. For view switchers, layout and density settings, theme pickers and any choice that is easier to see than to read.
FAQ
How do I draw my own views?
Each view in VIEWS has a list of shapes: rectangles with an x, y, w and h on a 120 by 80 grid and a tone of line, soft or strong. The same shapes draw the thumbnail and the large preview, so a new view needs one list, a name, a line and a sentence for the caption.
How does it work with a keyboard and a screen reader?
The tiles are one radio group named by its heading. Tab enters the group and the arrow keys move the choice; each radio is named by its title and described by its line. The drawings are hidden from assistive technology, so nothing depends on seeing them, and the caption is plain text that follows the choice.
Why does Set as default start quiet?
The block opens on the view the project already has, Board, so there is nothing to save. Choosing another tile makes the pick differ from the saved view and the status line reads that view's name; Set as default then keeps it as the saved one, and Discard returns to the saved tile.
How does it look on a phone?
The tiles stay two across and the preview stacks under them as its own band with its own top rule. The caption holds its height so choosing a view does not move the foot.