shadcn.io is not affiliated with official shadcn/ui
Layout Preference Onboarding Block for Svelte
A framed window where a segmented control sets Compact, Comfortable or Spacious and a drawn project table changes row height, rail width and how many rows fit.
Installation
Overview
Show a new user what a density setting does before they pick it, with this layout step for Svelte with Ark UI. It is a window of fixed height framed by Guides. The top bar names the step and holds the one Shine Button, which reads “Use” and the density you are looking at. Under it a Segment Group chooses Compact, Comfortable or Spacious, and below that is the app itself, drawn: a rail and a table of ten projects in a frame of fixed height. As you press, the rows change height, the owners' circles change size and the rail changes width (icons only when it is Compact), and the status line works out how many projects fit in the frame without scrolling: 8, 6 or 5. On a phone the rail is hidden and the table keeps its project and due columns.
FAQ
Where does the number of rows that fit come from?
From the same two numbers the drawing uses. The frame is 224 pixels tall (FRAME, which is the h-56 of the list) and each density has a row height in pixels (28, 36 or 44), so fitsOf is the frame divided by the row, rounded down. If you change a row's class, change its row number with it, and the sentence stays true.
Does pressing a density save it?
No. The segmented control only previews: nothing is kept until you press the primary, whose label follows the choice (“Use Comfortable”). The button then says “Saved in this demo. Nothing stored.” and keeps its label, so it can be pressed again after another look.
What stays local in the demo, and how do I wire it?
Everything. The ten projects, their owners and their due dates are typed in the file and the drawing is aria-hidden and inert. In your app save the chosen id where save says so, apply the same row and rail classes to your real table, and read the saved density on every page that shows one.
How does it work with the keyboard?
The segmented control is one tab stop; the arrow keys move between the three densities and each press previews at once. Its name is the heading “Density” and the line of words under it, which changes with the choice (“Tight rows, icons only.”). The primary follows in the top bar.
What happens with reduced motion?
The row height and the rail width change at once instead of easing, and the entrance fade is turned off. Nothing loops.
How does it look on a phone?
The segmented control sits under the heading, full width, with the three words in equal thirds. The rail is hidden and the owner column drops out, so the table keeps its names and dates; the frame keeps its height, so the count in the status line is still the number of rows you see.