# Shadcn App Shell blocks

> App shell layouts with sidebar, rail, or top bar navigation for dashboards, settings panels, and multi-page apps.

- Type: Pro blocks (Application)
- Page: https://web.dev.reui.io/blocks/application/app-shell
- Docs (Base UI): https://ui.shadcn.com/docs/components/base/sidebar.md
- Docs (Radix UI): https://ui.shadcn.com/docs/components/radix/sidebar.md
- Blocks: 35
- Installs with a ReUI Pro or Ultimate license; setup: https://web.dev.reui.io/docs/license-setup

## When to use

- The outer layout of a multi page product: the navigation around its content area
- Dashboards and admin consoles that switch between workspaces or projects

## When not to use

- One overview page of stats, charts and tables inside your own layout: use the [Dashboard blocks](https://web.dev.reui.io/blocks/application/dashboard.md)
- A top bar on its own, above a page layout you already have: use the [Navbar blocks](https://web.dev.reui.io/blocks/application/navbar.md)

## Agent notes

- Shells that switch themes call `useTheme` from next-themes, so the app must mount the next-themes ThemeProvider

## Third-party libraries

- next-themes: [API reference](https://github.com/pacocoursey/next-themes#api), [docs](https://github.com/pacocoursey/next-themes), used by 33 of 35 blocks
- React DayPicker v9: [API reference](https://daypicker.dev/v9/api), [docs](https://daypicker.dev/v9/start), used by 5 of 35 blocks
- Sonner v2: [API reference](https://sonner.emilkowal.ski/toast), [docs](https://sonner.emilkowal.ski/getting-started), used by 5 of 35 blocks
- dnd kit v6: [API reference](https://dndkit.com/legacy/api-documentation/context-provider/dnd-context/), [docs](https://dndkit.com/legacy/introduction/getting-started/), used by 4 of 35 blocks (these are the Legacy docs; dndkit.com's default docs cover the newer @dnd-kit/react, a different API)
- Headless Tree v1: [API reference](https://headless-tree.lukasbach.com/api/core/), [docs](https://headless-tree.lukasbach.com/getstarted/), used by 2 of 35 blocks
- React Resizable Panels v4: [API reference](https://github.com/bvaughn/react-resizable-panels#documentation), [docs](https://react-resizable-panels.vercel.app/), used by 2 of 35 blocks (v4 names its parts Group, Panel and Separator (v3 docs say PanelGroup))
- date-fns v4: [docs](https://date-fns.org/v4.1.0/docs/Getting-Started), used by 1 of 35 blocks

## Blocks

- [Icon Rail Dashboard](https://web.dev.reui.io/blocks/application/app-shell/app-shell-1.md): Collapsible icon-rail sidebar app shell with workspace switcher, nested nav, and user menu. Best for a dashboard layout whose sidebar folds to an icon rail, with a workspace switcher and pinned resources.
- [Floating Sidebar Admin](https://web.dev.reui.io/blocks/application/app-shell/app-shell-2.md): Floating icon-collapsible sidebar shell with command-K search, nested nav, and workspace switcher. Best for a floating sidebar with a Cmd+K search button up top and the workspace switcher at its foot, beside a breadcrumb of avatar crumbs.
- [Project Tracker Sidebar](https://web.dev.reui.io/blocks/application/app-shell/app-shell-3.md): Inset sidebar app shell with per-project progress rings and a multi-type notifications popover. Best for an inset project tracker sidebar with progress rings, a spending limit card and a notifications popover, over a breadcrumb only header.
- [Mail Inbox](https://web.dev.reui.io/blocks/application/app-shell/app-shell-4.md): Mail inbox app shell with icon-rail folder sidebar, wide message list, and selected-message action header. Best for a mail layout whose 440px message list sits inside the sidebar beside a folder icon rail, with All, Unread, Starred and Files tabs.
- [Calendar Contacts Hub](https://web.dev.reui.io/blocks/application/app-shell/app-shell-5.md): Calendar app shell, icon-rail sidebar switching Calendar, Schedule, Contacts, Notifications panels. Best for an icon rail swapping one 350px panel between a mini month with calendar toggles, a dated schedule, contacts and notifications.
- [Team Calendar Panel](https://web.dev.reui.io/blocks/application/app-shell/app-shell-6.md): Dual Sidebar App Shell with Dark Nav Rail and Slide-In Calendar Context Panel. Best for a dark zinc sidebar with a team presence list, beside a right context panel of mini calendar, calendar toggles and upcoming events.
- [Environment Switcher](https://web.dev.reui.io/blocks/application/app-shell/app-shell-7.md): Breadcrumb-switcher sidebar app shell with org/app/environment dropdowns and a live system monitor popover. Best for a full width header with org, app and environment switchers, a system monitor popover that ticks every second and swipeable news cards.
- [Inventory Admin](https://web.dev.reui.io/blocks/application/app-shell/app-shell-8.md): Inset icon-rail sidebar app shell with per-section secondary nav, org/app/env switchers, and notifications. Best for an inventory and orders admin whose secondary nav swaps per rail section, each with its own footer card such as live stats or storage.
- [Team Presence Workspace](https://web.dev.reui.io/blocks/application/app-shell/app-shell-9.md): Dark inset-sidebar team workspace shell with member presence rail and notifications feed. Best for a dark inset sidebar with a team presence list, an AI credits meter and notifications, beside a plain breadcrumb header.
- [AI Agents Console](https://web.dev.reui.io/blocks/application/app-shell/app-shell-10.md): AI Agents App Shell with Collapsible Sidebar, Active-Project Rings, and Rich Notifications. Best for an AI agents console with Agents, Tools, Knowledge and Runs subnavs and a header holding an Auto Refresh switch and a New order button.
- [Operations Workbench](https://web.dev.reui.io/blocks/application/app-shell/app-shell-11.md): Operations sidebar app shell with four toggleable regions and a resizable bottom workbench sheet. Best for a record workspace whose button group toggles 4 regions, with resizable panes and a bottom workbench of Webhooks, Logs and Health tabs.
- [Apps Grid Header](https://web.dev.reui.io/blocks/application/app-shell/app-shell-12.md): Icon-rail sidebar app shell with command-K search, notifications feed, apps grid, and theme menu. Best for a header of Cmd+K search, notifications, a 6 app grid and a user menu with a theme picker, over a page toolbar and a links footer.
- [Community Feed App](https://web.dev.reui.io/blocks/application/app-shell/app-shell-13.md): Community feed app shell with full-width header above a collapsible icon-rail sidebar. Best for a community feed layout under a full width search header, with Custom Feed and Communities groups and a Manage Feeds filter menu.
- [View Toolbar Workspace](https://web.dev.reui.io/blocks/application/app-shell/app-shell-14.md): Mini icon-rail sidebar app shell with per-section secondary nav and a tabbed workspace toolbar. Best for a view toolbar of List, Kanban, Calendar and Dashboard tabs with Sort, View and Filter toggles, beside a secondary nav that folds away.
- [Pinnable Favorites Nav](https://web.dev.reui.io/blocks/application/app-shell/app-shell-15.md): Dark full-width topbar app shell with workspace switcher, pinnable sidebar nav, and favorites. Best for a thin dark top bar with Upgrade and New menus over a sidebar whose More menu pins and unpins nav items above a favorites group.
- [Dual Sidebar Dashboard](https://web.dev.reui.io/blocks/application/app-shell/app-shell-16.md): Dual sidebar app shell with icon rail and collapsible secondary navigation panel. Best for a rounded black icon rail with Inbox, Calendar and Settings menus at its foot, beside a nav column topped by a workspace switcher.
- [Model Picker Chat](https://web.dev.reui.io/blocks/application/app-shell/app-shell-17.md): AI chat assistant app shell with floating sidebar, model picker grid, and prompt composer. Best for an AI chat start screen whose 3 up sidebar model grid syncs with the header model menu, with attach, web search and voice in the composer.
- [To-Do AI Assistant](https://web.dev.reui.io/blocks/application/app-shell/app-shell-18.md): Task workspace app shell with collapsible floating sidebar and a toggleable AI chat assistant panel. Best for a to-do app with task lists, color tags and a focus progress card in a floating sidebar, beside a toggleable AI assistant chat panel.
- [Scheduling Planner](https://web.dev.reui.io/blocks/application/app-shell/app-shell-19.md): Calendar app shell with inset sidebar date picker, up-next agenda, and Day/Week/Month view switcher. Best for a month picker in an inset sidebar that slides fully away, with the next 2 events and Events, Meetings, Tasks and Reminders counts.
- [Webmail Client](https://web.dev.reui.io/blocks/application/app-shell/app-shell-20.md): Mail client app shell with folder sidebar, split list and reading panes, and icon app rail. Best for a mail layout with a compose dialog, labels and contacts in the sidebar, list and reading panes as empty states and a right shortcut rail.
- [Resizable AI Chat](https://web.dev.reui.io/blocks/application/app-shell/app-shell-21.md): AI chat app shell with resizable thread sidebar, collapsible icon rail, and model picker. Best for an AI chat whose thread sidebar drags wider or folds to a 48px rail, with Chats and Artifacts tabs, pin to top menus and a memory toggle.
- [Fleet Operator Console](https://web.dev.reui.io/blocks/application/app-shell/app-shell-22.md): Photo banner app shell with crossfading hero images, pixel dissolve, glass icon rail and pill nav. Best for a band of 6 crossfading photos that ends in a pixel dissolve, under a glass icon rail, a centered pill nav and an access request toast.
- [Team Project Switcher](https://web.dev.reui.io/blocks/application/app-shell/app-shell-23.md): Team and project switcher topbar app shell with indented sidebar route groups and a 3x3 apps menu. Best for a top bar of team and project crumb switchers with a New Mission template menu, a 9 app grid and a notifications sheet with approvals.
- [Ops Presence Console](https://web.dev.reui.io/blocks/application/app-shell/app-shell-24.md): Inset notifications sheet app shell with route search palette and topbar section pills. Best for a top bar whose section pills fold into a bottom drawer, a route search that sets the sidebar route and a presence status menu on the avatar.
- [Mission Control](https://web.dev.reui.io/blocks/application/app-shell/app-shell-25.md): Mission control app shell with icon rail, 4-tab missions panel and expandable robot event feeds. Best for a 436px missions panel by an icon rail, where the header robot search filters the assignment rows under a tick per mission chart.
- [Security Scope Console](https://web.dev.reui.io/blocks/application/app-shell/app-shell-26.md): Security console app shell with icon scope tabs and a drag-to-reorder collapsible scope tree. Best for section pills and a Run Scan button in the top bar, over icon scope tabs that add or duplicate up to 7 scopes of reorderable trees.
- [Route Search Sidebar](https://web.dev.reui.io/blocks/application/app-shell/app-shell-27.md): Searchable route sidebar shell with a 48px icon rail fold and a Security, Assets, Events scope tree. Best for a layout with no top bar, whose sidebar filters routes as you type and folds to a 48px rail, beside a docked scope panel with Add buttons.
- [Section Tabs Admin](https://web.dev.reui.io/blocks/application/app-shell/app-shell-28.md): Single rounded-panel app shell framing a grouped nav rail and body under top icon section tabs. Best for icon section buttons in the top bar over one rounded panel holding a 3 group fleet rail and the page body, with a 3 alert menu.
- [Section Tile Rail](https://web.dev.reui.io/blocks/application/app-shell/app-shell-29.md): Section tile rail shell with a 3x3 tile grid, workspace tabs and a status-badged robot network tree. Best for a layout with no header, where Fleet, Team and Events tabs each swap the rail's section tiles and its status badged tree.
- [Top Navbar Admin](https://web.dev.reui.io/blocks/application/app-shell/app-shell-30.md): Sidebar-free top nav app shell with an 8-tab segmented view track and a count-badge page header. Best for a layout with no sidebar, icon section buttons and an Onboard Robot action up top, and 8 view tabs under a title with fleet counts.
- [Folder Tab Workspace](https://web.dev.reui.io/blocks/application/app-shell/app-shell-31.md): Folder-tab workspace app shell with floating pill-group rail, color wash and assistant column. Best for a glass layout on 6 blurred color fields, with a floating pill rail of 9 sections, SVG cut folder tabs and a skeleton assistant column.
- [Endpoint Protection](https://web.dev.reui.io/blocks/application/app-shell/app-shell-32.md): Fleet protection app shell with endpoint and threat counts, mission dialog and docked AI assistant. Best for header Endpoints and Threats pills read from the scope tree, a menu hiding tree counts or status and an assistant that cites runbooks.
- [Fleet Center](https://web.dev.reui.io/blocks/application/app-shell/app-shell-33.md): Fleet center app shell with an always-dark side card, pinnable view tiles and a connected apps rail. Best for a dark card in both themes whose title swaps for a scope filter, a plus tile pinning more views and Quick Add and System menus.
- [Invoice Matching](https://web.dev.reui.io/blocks/application/app-shell/app-shell-34.md): 3-way invoice matching app shell with a PO tree, linked check markers and a docked AI advisor. Best for a purchase order queue with 3 linked check markers per order, Review, Ready and Overdue filters and an AI advisor citing AP policies.
- [Whiteboard Workspace](https://web.dev.reui.io/blocks/application/app-shell/app-shell-35.md): Whiteboard app shell with a fixed icon rail, centered board view tabs and editing-now avatars. Best for a whiteboard layout with centered Board, Outline, Comments and Activity tabs, editing now avatars and a confirmed delete that offers Undo.

Every ReUI item has a twin like this one; the index is https://web.dev.reui.io/llms.txt. Agents with the ReUI MCP (https://web.dev.reui.io/docs/mcp) get the same guidance from the getters named above.