Docs / Guide: Building a Dashboard
The parts, in the order a reader’s eyes take them.
A dashboard is the App Shell block and then restraint. Sidebar navigation, a top bar, and a content column — the shell is already composed from the catalog’s own parts, so the page inherits the mold for free. Resist adding a second navigation pattern inside the content; one way to move is a feature.
Below 720px the shell hides its sidebar. Whatever your page adds must survive that: if a control only exists in the sidebar, it needs a second home.
The first row is Stat Cards — three or four numbers with deltas, because most visits answer one question: is it up or down? Charts come second, and one chart per question. The Line Chart shows change, the Donut shows share, the Bar Chart compares. A dashboard with six charts answers nothing; it performs analysis instead of providing it.
Every chart in the catalog states its conclusion in its accessible label. Keep that habit in your own charts: the sentence first, the picture second.
Below the fold, a Data Table with sortable columns and row selection does the actual job of the page. Keep rows to the fields people compare, put the row’s main action first, and let the footer paginate honestly. If a table needs fourteen columns, the answer is a detail page, not a wider table.
Getting Started · Theming · Dark Mode · Accessibility · Installation · JavaScript · Guide: Building a Settings Page · Guide: Building a Pricing Page · Guide: Sign-in & Account Pages · Why Vanilla · The Mold · Anatomy of a Part · Coming from Tailwind · FAQ · Changelog