design-infraReport a problem or share feedback← Catalog
App shell
curatedtheme-awarefreeoc/app-shell
Product app frame on the shadcn sidebar: brand header, grouped nav with badges, user dropdown, icon-collapse (Cmd/Ctrl+B) and mobile sheet; header bar with breadcrumbs + action slot; content slot.
$
npx shadcn@latest add @design-infra/app-shellnpm deps: lucide-react
Live demo — under each design system
brutalist-mono
editorial
linear-dark
soft-glass
- Source
- oc
- Kind
- block
- Categories
- sidebar, navigation, dashboard
- Use as
- drop-in — replaces your component
- Applies to
- sidebarnavigationdashboard
- Motion
- not tagged (static or unknown)
- Tags
- oc
- Live demo
- www.owencoonahan.xyz
Similar
Compare all 4 →- Sidebar 07shadcn/sidebar-07Sidebar that collapses to icons, with team switcher + user menu — the best default app shell. Writes app/dashboard/page.tsx and components/app-sidebar.tsx (installing another sidebar-NN overwrites it).
- Sidebar 08shadcn/sidebar-08Inset sidebar with secondary nav — Linear/Vercel-style shell.
- Sidebar 15shadcn/sidebar-15Left nav + right sidebar (calendar) — three-column layouts like mail/calendar apps.