Founding price: $35, then $79.99 after 23:59 UTC on 4 November, then $79.99
Get ProThe frame of an application page: skip link, sticky header, sidebar that becomes a sheet on small screens, main area, optional aside and footer.
This item has no props to tune. Use the lens above to change theme, density, direction and more.
| Prop | Type | Default | Description |
|---|---|---|---|
headerHeight | string | "3.5rem" | Header height, used to offset the sticky side panels. |
sidebarWidth | string | "15rem" | Sidebar column width from the lg breakpoint up. |
asideWidth | string | "18rem" | Aside column width from the xl breakpoint up. |
Also accepts all <div> props.
| Prop | Type | Default | Description |
|---|---|---|---|
label | string | "Sidebar" / "Details" | Accessible name of the landmark (and sheet). |
AppShellSkipLink (defaults to href="#app-main"), AppShellHeader, AppShellSidebarTrigger, AppShellMain and AppShellFooter accept the props of their elements. useAppShell() returns { sidebarOpen, setSidebarOpen }.
lg the sidebar renders in a sheet opened by AppShellSidebarTrigger; choosing a link inside closes it.min-h-svh). To embed it in a page, give it a fixed height and overflow-auto, as the demo does.