Business dashboard design
A complete pattern for building data-dense SaaS dashboards that stay fast, readable, and maintainable at scale.
📊
Layout architecture
Sidebar + topbar shell with responsive collapse. CSS Grid for widget zones, subgrid for alignment.
⚡
Data fetching
React Server Components for initial paint, SWR for live mutations. Stale-while-revalidate keeps numbers fresh.
🎨
Widget system
Composable card primitives with title, value, delta, and sparkline slots. Drag-to-reorder via lightweight state.
🔐
Role-based views
Admin, manager, and member dashboards from one codebase. Layout middleware swaps widget sets per role.
Key metrics that matter
- Revenue, MRR, churn — always above the fold
- Active users, session duration, feature adoption
- Support ticket volume, avg response time
- Server health, error rate, p95 latency