Components / Blocks / DashboardShell
Dashboard
FreeBlockA responsive application shell with navigation, header, metric slots, and a content workspace.
Demo dataResponsive
Revenue
$24.1k
+12.5%
Orders
1,429
+8.1%
Customers
892
+6.3%
Your product content starts here.
Installation
pnpm dlx shadcn@latest add https://elements.micropreneur.dev/r/dashboard-shell.jsonThe shadcn CLI writes the source into your project. Files added:
- components/blocks/dashboard-shell.tsxblock
- lib/utils.tslib
Dependenciesclsxtailwind-merge
API
| Prop | Type | Default | Description |
|---|---|---|---|
| brand (required) | ReactNode | — | |
| children (required) | ReactNode | — | |
| header | ReactNode | — | |
| metrics | readonly DashboardShellMetric[] | [] | |
| navItems (required) | readonly DashboardShellNavItem[] | — | |
| user | ReactNode | — |
Also accepts ComponentProps<'section'>.
DashboardShellNavItem
| Prop | Type | Default | Description |
|---|---|---|---|
| active | boolean | — | |
| href (required) | string | — | |
| icon | ReactNode | — | |
| label (required) | string | — |
DashboardShellMetric
| Prop | Type | Default | Description |
|---|---|---|---|
| detail | ReactNode | — | |
| label (required) | string | — | |
| value (required) | ReactNode | — |
Accessibility
- Navigation is a labelled nav landmark ("Primary").
- The active item sets aria-current="page".