Dashboard Shell
A contained dashboard frame with our sidebar, a top bar with search and a notifications popover, plus KPI tiles with sparklines and raised panels for charts and tables.
Preview
Install
Pro source requires Pebble Pro. Try the full preview above.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| workspace | { name, plan? } | — | Shown at the top of the sidebar with a lit-key monogram. |
| user | { name, email? } | — | Shown in the sidebar footer. |
| nav | { label?, items: { id, label, icon?, badge? }[] }[] | — | Sidebar groups and items. |
| activeId / defaultActiveId | string | first item | Controlled or initial active item. Pair activeId with onNavigate. |
| onNavigate | (id) => void | — | Called when a nav item is chosen. |
| title | ReactNode | — | Page heading (h1) in the top bar. |
| eyebrow | ReactNode | — | Small line above the heading. |
| actions | ReactNode | — | Buttons at the end of the top bar. |
| searchPlaceholder | string | "Search" | Top bar search placeholder. / focuses it. |
| onSearch | (query) => void | — | Called on Enter in the search field. |
| notifications | { id, title, time, unread? }[] | — | Shows the bell with a popover list. |
| onMarkAllRead | () => void | — | Shows Mark all read in the popover. |
| children | ReactNode | — | Page body. Compose DashboardKpi and DashboardPanel inside. |
Pro component
Try the full preview above. Editable source and build guides require Pebble Pro.