Dashboard layouts that actually work

A dashboard is the page where users spend the most time and complain the most. Every team starts by trying to make their dashboard "clean", usually by deleting things until it's too sparse to be useful, and ends up with a Frankenstein after eighteen months of feature requests.

The fix isn't more taste. It's picking the right archetype up front. There are four dashboard layouts that work, each one shaped by the kind of work it supports. Pick the wrong one and no amount of polish will save it.

The four archetypes

1. Sidebar + main panel

The default. A persistent sidebar on the left holds navigation; the main panel holds the active surface. This is what Linear, Notion, Vercel dashboard, and Stripe dashboard all converge on. It works because navigation is always visible and the main panel can be any density.

Use it when your product has 5+ top-level surfaces and users move between them often. Don't use it when the dashboard is a single view (analytics, monitoring), the sidebar becomes wasted space.

2. Top tabs + single canvas

A tab bar at the top, one wide canvas below. Stripe Checkout dashboard, Vercel project pages, GitHub repository views. The canvas can be a list, a chart, a settings page, but it's always one thing at a time, and the tabs let you flip between facets of the same object.

Reach for it when the dashboard is about one thing (a project, a customer, an invoice) and users want to inspect multiple facets of it. Avoid when users are juggling multiple objects, tabs don't scale past ~7 items and have no nested structure.

3. Kanban / board

Columns of cards, each column a status, each card an item. Linear's board view, Trello, Notion boards, Things 3. Works for any process with discrete stages, issue tracking, sales pipelines, content calendars, recruiting.

Don't use it when the items don't have clear states, or when there are more than ~5 stages. Past five columns and the board becomes a scrolling burden; condense to a status filter on a list view instead.

4. Data grid

A table with sortable columns, filters, bulk actions. Retool, Airtable, Stripe Dashboard's payments table, Linear's issues list. Optimized for power users who need to scan and act on many rows at once.

Data grids are deceptively hard. The 20% you'll build in a weekend gets you to a working table; the remaining 80% (frozen columns, virtual scrolling, keyboard navigation, multi-select, inline edit, column resize, server-side pagination) is what makes it actually usable. Use TanStack Table or AG Grid, don't build from scratch unless you have a team for it.

The density rules

Dashboards live or die on density. Too sparse and users feel like the product is hiding things. Too dense and they can't find anything. The rules below are what most production dashboards converge on once they've shipped past a couple of iterations.

• Information hierarchy is set by type weight, not by color. Use a 3-step weight ladder (semibold for labels, medium for values, regular for metadata) before reaching for color. Color carries meaning (status, severity), wasting it on hierarchy poisons that channel.
• Compact mode is a feature, not an afterthought. Power users want denser tables. Ship a density toggle (comfortable / compact) and let them set the default in settings.
• Every list view needs a search and a filter set. Lists past ~25 rows without filtering get scrolled past. The search field belongs at the top-right; the filter chips at the top-left under the title.
• Empty states must be specific. Not "No items found", "No invoices yet. [Create your first invoice]" with the CTA inline. Empty states are onboarding, not error pages.
• Bulk actions appear contextually. When 1+ rows are selected, a bar slides in at the bottom with the available actions. Don't bury bulk actions in a per-row dropdown.

The metrics row

Most dashboards open with a row of metric cards, Active users · Revenue · Churn · Growth. Most of them are wrong. Four traps:

1. 01Showing 6+ metrics. Users only register 3. Pick the three that matter and put the rest on a secondary page.
2. 02Showing the value without the comparison. "$12,400" is data. "$12,400 (+18% vs last month)" is information. Comparison is what turns a number into an action.
3. 03Tiny sparklines that nobody reads. A 40px sparkline tells you nothing about trend. Either show a real chart or no chart.
4. 04Identical card styling for all metrics. When everything is equally visually weighted, the user's eye doesn't know what's important. Bold the primary metric, dim the others.

Build one

The dashboard entry in the directory has the anatomy and tuned prompts for all four archetypes, sidebar layout, top-tabs scaffold, kanban board, and data grid. Pair with the forms entry for the inevitable settings page.