App Shell
AppFrame: one Sidebar, any width
The frame measures its own width. Below 768px the same Sidebar becomes a slide-in drawer and the menu button appears in the top bar. Drag the corner of the frame or pick a preset.
Revenue
1,284
Active users
1,284
Conversion
1,284
Churn
1,284
Refunds
1,284
The stat cards use Grid columns="auto", so they reflow as the sidebar opens, collapses or becomes a drawer, with no breakpoint classes anywhere.
TopBar
API reference
AppFrame
| Prop | Type | Default | Description |
|---|---|---|---|
| sidebar* | ReactNode | — | The app's navigation: a `<Sidebar>`. Written once; the frame turns it into a slide-in drawer when it runs out of room. |
| children* | ReactNode | — | Main application content (usually a `<TopBar>` followed by the page body). |
| compactBelow | "md" | "lg" | — | Frame width below which the sidebar becomes a drawer: "md" (768px, default) or "lg" (1024px). Measured on the frame itself, not the window. |
| navLabel | string | Navigation | Accessible name of the navigation drawer. Default "Navigation". |
| routeKey | string | — | Pass the current route (e.g. `usePathname()`): the drawer closes whenever it changes, so navigation from menus or links inside the sidebar never leaves it open. |
| className | string | — | — |
* required
TopBar
| Prop | Type | Default | Description |
|---|---|---|---|
| children | ReactNode | — | TopBar header content. |
| className | string | — | — |