App Shell
The frame around every page, built on the shadcn sidebar. Navigation from data, a workspace switcher, a user menu, breadcrumbs, search and notifications.
The sidebar layouts use shadcn's Sidebar, so collapsing, the mobile sheet, ⌘B and theming all work as documented there. These blocks add what goes in it. Navigation comes from data and marks the active link from the current path.
App Shell also installs its own hooks/use-mobile.ts, which replaces the one that comes with the sidebar: it reads the screen width without setting state in an effect, so react-hooks/set-state-in-effect passes in a new Vite project. Running shadcn add --overwrite sidebar on its own brings the original back. Add an App Shell block again with --overwrite to restore this one.
Links are plain <a> elements. For client-side navigation, pass your router's link to LinkProvider. See Routers.
Sidebar
A workspace switcher, navigation sections with count badges and a user menu. The top bar holds breadcrumbs, search on ⌘K and notifications.
Icon Sidebar
Collapses to icons with tooltips, using the trigger, the rail or ⌘B. Sections with child links open when one of them is the current page. Help and settings are pinned to the bottom.
Inset
The page sits in a card beside the sidebar. Plan usage with an upgrade link sits above the user menu.
Top Navigation
No sidebar. Page links sit under the top bar and scroll sideways on small screens. The user menu is an avatar.