Skip to content
Application & Dashboard
B. Application & Dashboard

App Shell

The frames every product screen lives in — sidebar + topbar, collapsed rail, top-nav only, dual sidebar with context panel, dark mode and a mobile shell with bottom navigation.

6 screensDesktop · Tablet · MobileLight · Dark

Write every screen of this block into your project — the source is then yours to edit.

bash
npx @wunderui/cli add app/app-shell

01Sidebar + top bar

Uses: Sidebar · SidebarItem · UserInfo · StatCard · Table

components/blocks/app/app-shell/01-sidebar-topbar.tsx

02Collapsed sidebar + tabbed content

Uses: Sidebar · IconButton · TabBar · Badge

components/blocks/app/app-shell/02-collapsed-tabs.tsx

03Top navigation only

Uses: Navbar · NavbarLink · Avatar · StatCard

components/blocks/app/app-shell/03-top-navigation.tsx

04Dual sidebar with context panel

Uses: Sidebar · SidebarItem · Badge · Separator

components/blocks/app/app-shell/04-dual-sidebar.tsx

05Dark mode

Uses: AppFrame · PageHeader · StatCard

components/blocks/app/app-shell/05-dark-mode.tsx

06Mobile shell with bottom navigation

Uses: Badge · Avatar · StatCard

components/blocks/app/app-shell/06-mobile-bottom-nav.tsx

Analytics Dashboard →