App shell^pattern

The signed-in frame: side nav, header bar and page.

Patterns

Built from: sidebar · Button · Avatar · Separator · Card
Guidance: draft · v0.1.0

Examples

Copy the code into a product and change the content – the layout and tokens carry over.

Open full screen

shadcn's Sidebar, inset variant, collapsing to icons: brand, two nav groups, help, account; a header bar with the trigger and a breadcrumb.

Guidance

When to use

For every signed-in product screen: the review hub, jsp-os, the finance tool.

Structure

Side nav – shadcn's Sidebar, variant="inset", collapsible="icon". Brand or workspace switcher at the top, the product's sections in groups, help near the foot, the account menu last.
Header bar – the sidebar trigger, a breadcrumb and page-level icons (notifications, search). No primary actions here – they go in the page header.
Page – a page header, then the page's content.

Rules

Up to seven top-level items; group the rest under a label.
Every collapsed item has a tooltip, because only its icon shows.
Below md the side nav is a sheet opened from the header bar's trigger.
One main landmark – SidebarInset is it.

Built from