Installation
Usage
import { DashboardShell } from "@/components/dashboard-shell"
export default function Page() {
return <DashboardShell productName="Acme" hotkey />
}Props
| Prop | Type | Default | Description |
|---|---|---|---|
| productName | string | "Acme" | Shown in the sidebar. |
| stats | { label; value; kind?; delta?; invert?; trend? }[] | four sample stats | Key-number cards. kind is number, currency or percent (a fraction); invert marks numbers where a rise is bad news; trend draws a sparkline. |
| currency | string | "USD" | ISO 4217 code for currency stats, the chart and the table. |
| hotkey | boolean | false | Enable the global ⌘K / Ctrl+K shortcut. |
| headingLevel | 1 | 2 | 1 | 1 when this is the page's top section; 2 when it sits under another title. |
Accessibility
- Landmarks: nav (Main), header and main; the current page has aria-current="page".
- The folded rail keeps every name (visually hidden) and the fold button is a toggle with aria-pressed.
- On small screens the sidebar opens over the content from a menu button with aria-expanded; Escape closes it and returns focus.
- The chart has an accessible data table; the range is a labelled radio group; motion is instant under prefers-reduced-motion.
Changelog
- v1.0.0Latest
First release.