shadcn.io is not affiliated with official shadcn/ui
Dashboard Config Onboarding Block for Svelte
A framed window with a rail of six widget toggles beside a canvas that redraws the dashboard as you choose, from one full-page widget up to six in three columns.
Installation
Overview
Let a new user build the first dashboard by choosing what is on it, with this dashboard step for Svelte with Ark UI. It is a window of fixed height framed by Guides, with the product's mark, the heading “Build your dashboard” and the one Shine Button in its top bar. At the start of the body is a rail of six widgets (Spend, Reach, Tasks, Calendar, Team and Alerts) as a Toggle Group where at least one stays on. Beside it the canvas is drawn from the choice and never changes the window's size: one widget fills it, two split it, three are one wide and two small, four are two by two, and five or six fill three columns by two rows. Each widget is a small greyscale drawing of a big number, a sparkline, task rows, a month grid, an avatar stack or bell rows, and the status line at the foot says how many are on and how they sit. On a phone the rail becomes a row of chips above the canvas.
FAQ
How does the canvas decide where each widget goes?
From the number of widgets alone. GRIDS holds one grid for each count, written out in full so Tailwind sees every class, and spanOf makes the first widget of three, and the last of five, take two columns. The widgets always keep the rail's order (Spend first, Alerts last), so turning one on never reshuffles the others. The canvas is a grid that fills a fixed frame, which is why it reflows without the window growing.
Why can I not turn the last widget off?
A dashboard with nothing on it has no layout to draw. Pressing the last pressed toggle leaves it on and the status line says “Keep at least one widget.” The check is in change, the toggle group's handler, which ignores a value with no entries on every base.
What stays local in the demo, and how do I wire it?
Everything. The widgets, their numbers and their names are typed in the file, and Build my dashboard only says “Built in this demo. Nothing saved.” In your app save the chosen ids where build says so, in the rail's order, and draw the real widgets in the cells that Tile draws now. The canvas is aria-hidden and inert because it is a picture of the result; the rail is the control.
How does it work with the keyboard?
The rail is one tab stop and the arrow keys move between the toggles; Space or Enter turns one on or off. Build my dashboard follows it in the tab order, in the top bar. Every toggle is named by its visible word, and the count (“3 of 6”) is read as one phrase.
How does it look on a phone?
The top bar keeps the mark, the heading and the primary, which shortens to “Build” while its name stays “Build my dashboard”. The rail turns into a row of chips that scrolls sideways, and the canvas takes the rest of the window: one column for one or two widgets, two columns for the rest, so six widgets sit in three rows. The window keeps its height.
Does it follow my theme, and what about right-to-left?
It uses only tokens, so any theme and dark mode apply, and the drawings are in foreground weights. In a right-to-left layout the rail sits at the start edge, the avatar stack reverses and the sparkline and month grid stay left to right on purpose, as charts do.