Shadcn App Shell and Sidebar Layout Blocks

For AI Agents

Hand your agent this brief or the ReUI MCP, not a screenshot. Installs with a ReUI Pro or Ultimate license.

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
A top bar on its own, above a page layout you already have: use the Navbar blocks

Agent notes

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

Third-party API docs

next-themes: API reference, docs, used by 33 of 35 blocks
React DayPicker v9: API reference, docs, used by 5 of 35 blocks
Sonner v2: API reference, docs, used by 5 of 35 blocks
dnd kit v6: API reference, docs, 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, docs, used by 2 of 35 blocks
React Resizable Panels v4: API reference, docs, used by 2 of 35 blocks (v4 names its parts Group, Panel and Separator (v3 docs say PanelGroup))
date-fns v4: docs, used by 1 of 35 blocks

Markdownhttps://web.dev.reui.io/blocks/application/app-shell.md

MCPsearch({ query: "app shell", type: "block", category: "app-shell" })

Full index for agents:llms.txtReUI MCP setup

Choose a Shell by Navigation Topology, Then by App Type

Most dashboard questions that look like design problems are really shell problems: where nav lives, how it collapses, what survives on a phone, and whether a second level of navigation is a nested tree or a panel of its own. These blocks answer that with working layouts instead of a single opinionated skeleton.

29 of them build on the shadcn Sidebar primitive, and the other 6 draw their own rail or drop the sidebar for a top nav (2 of those still borrow its provider state and menu rows). ReUI Badge, Frame, Rating, IconTile, and Sortable, plus DropdownMenu, Popover, Avatar, Breadcrumb, Dialog, Kbd, Tabs, and Sheet, carry the chrome around them. Because the primitives are shared, moving between shells does not mean rewriting your nav data.

About a third are general-purpose dashboard shells, and about as many are shaped around a specific app: mail, calendar, AI chat, task management, a community feed, an AI agents console, and a dense operations workbench. The other 14 leave the content region as skeleton placeholders, so what you pick is the shell itself: consoles for a robot fleet, a security team, or an accounts payable queue, and a whiteboard workspace.

All App Shell Blocks

Open any block on its own page for a live preview, the components it is built from, and the install command.

Icon Rail Dashboard Collapsible icon-rail sidebar app shell with workspace switcher, nested nav, and user menu
Floating Sidebar Admin Floating icon-collapsible sidebar shell with command-K search, nested nav, and workspace switcher
Project Tracker Sidebar Inset sidebar app shell with per-project progress rings and a multi-type notifications popover
Mail Inbox Mail inbox app shell with icon-rail folder sidebar, wide message list, and selected-message action header
Calendar Contacts Hub Calendar app shell, icon-rail sidebar switching Calendar, Schedule, Contacts, Notifications panels
Team Calendar Panel Dual Sidebar App Shell with Dark Nav Rail and Slide-In Calendar Context Panel
Environment Switcher Breadcrumb-switcher sidebar app shell with org/app/environment dropdowns and a live system monitor popover
Inventory Admin Inset icon-rail sidebar app shell with per-section secondary nav, org/app/env switchers, and notifications
Team Presence Workspace Dark inset-sidebar team workspace shell with member presence rail and notifications feed
AI Agents Console AI Agents App Shell with Collapsible Sidebar, Active-Project Rings, and Rich Notifications
Operations Workbench Operations sidebar app shell with four toggleable regions and a resizable bottom workbench sheet
Apps Grid Header Icon-rail sidebar app shell with command-K search, notifications feed, apps grid, and theme menu
Community Feed App Community feed app shell with full-width header above a collapsible icon-rail sidebar
View Toolbar Workspace Mini icon-rail sidebar app shell with per-section secondary nav and a tabbed workspace toolbar
Pinnable Favorites Nav Dark full-width topbar app shell with workspace switcher, pinnable sidebar nav, and favorites
Dual Sidebar Dashboard Dual sidebar app shell with icon rail and collapsible secondary navigation panel
Model Picker Chat AI chat assistant app shell with floating sidebar, model picker grid, and prompt composer
To-Do AI Assistant Task workspace app shell with collapsible floating sidebar and a toggleable AI chat assistant panel
Scheduling Planner Calendar app shell with inset sidebar date picker, up-next agenda, and Day/Week/Month view switcher
Webmail Client Mail client app shell with folder sidebar, split list and reading panes, and icon app rail
Resizable AI Chat AI chat app shell with resizable thread sidebar, collapsible icon rail, and model picker
Fleet Operator Console Photo banner app shell with crossfading hero images, pixel dissolve, glass icon rail and pill nav
Team Project Switcher Team and project switcher topbar app shell with indented sidebar route groups and a 3x3 apps menu
Ops Presence Console Inset notifications sheet app shell with route search palette and topbar section pills
Mission Control Mission control app shell with icon rail, 4-tab missions panel and expandable robot event feeds
Security Scope Console Security console app shell with icon scope tabs and a drag-to-reorder collapsible scope tree
Route Search Sidebar Searchable route sidebar shell with a 48px icon rail fold and a Security, Assets, Events scope tree
Section Tabs Admin Single rounded-panel app shell framing a grouped nav rail and body under top icon section tabs
Section Tile Rail Section tile rail shell with a 3x3 tile grid, workspace tabs and a status-badged robot network tree
Top Navbar Admin Sidebar-free top nav app shell with an 8-tab segmented view track and a count-badge page header
Folder Tab Workspace Folder-tab workspace app shell with floating pill-group rail, color wash and assistant column
Endpoint Protection Fleet protection app shell with endpoint and threat counts, mission dialog and docked AI assistant
Fleet Center Fleet center app shell with an always-dark side card, pinnable view tiles and a connected apps rail
Invoice Matching 3-way invoice matching app shell with a PO tree, linked check markers and a docked AI advisor
Whiteboard Workspace Whiteboard app shell with a fixed icon rail, centered board view tabs and editing-now avatars

Navigation Topologies You Can Pick Between

Collapsible icon rail A sidebar that collapses to icons while keeping nested nav, count Badge chips, pinned resources, and row action menus reachable at both widths.
Floating and inset sidebars Detached floating panels and inset shells that sit inside a rounded content frame, nearly all collapsible to icon and several fronted by a Breadcrumb header.
Two-level dual sidebar An icon rail plus a secondary nav panel whose contents swap per section, with live-metric or storage footers pinned to the bottom of the second level.
Header-first breadcrumb switcher Org, app, and environment DropdownMenu switchers living inside the breadcrumb itself, for multi-tenant and multi-environment consoles, plus a team and project pair in a full-width topbar.
Dark topbar over sidebar A fixed full-width dark topbar above an icon-collapsible sidebar, with workspace switcher, pin and unpin nav, a favorites group, and a gradient upgrade menu.
Multi-region workbench Resizable split panes, an expandable bottom workbench sheet, and a right calendar and agenda rail, using shadcn Resizable and Sheet.
Topbar section nav over a sidebar A full-width topbar with icon section pills or tabs above the sidebar. Below lg the pills fold into a bottom Drawer and the tabs into a current-section DropdownMenu, and the tab version frames the rail and the page body inside a single rounded panel.
Top nav with no sidebar Icon sections in the top bar and an 8-tab segmented view track under a page header with count Badge chips, each folding into its own DropdownMenu on small screens.
Tabbed scope trees Tabs that switch between collapsible trees with count and status Badge chips. In 3 shells sub-scopes reorder by drag handle through ReUI Sortable and inline Add actions append draft rows, and a fourth pairs its tree with a 3 by 3 grid of section tiles.
Searchable tree panel beside a fixed rail An always-dark side card that puts 8 view tiles over a reorderable scope tree, and a purchase order queue whose rows open 3 checks marked passed, failed or pending, with issue count Badge chips.
Floating glass rails A dark glass icon rail and a centered pill nav over a photo band that crossfades 6 images, and a rail of 3 translucent pill groups beside a Tabs workspace drawn as SVG folder tabs over a color wash.

Shell Chrome You Do Not Have to Build Twice

Command-K search as a real Dialog with Kbd shortcut hints, not a decorative input that goes nowhere.
Route search that filters as you type: a palette that narrows the sidebar routes by name, keeps their groups, and opens the top match on Enter, and a sidebar field on Cmd or Ctrl+F, both with an Empty state when nothing matches.
Workspace, org, app, and environment switchers with Avatar identity and keyboard-navigable DropdownMenu menus.
Notifications as a multi-type Popover, as a right-side Sheet with an unread count, Mark all as read, and inline actions, or as a full feed panel inside the sidebar.
Usage and limit surfaces: AI credit cards, storage footers, per-project donut progress rings, and Progress meters that show a plan running out.
Account menus that already carry the theme toggle, so light and dark switching lives in the shell instead of being bolted on later.
Presence status in the account menu (Online, Away, Offline) that shows as a badge on the avatar.
Responsive behaviour that degrades honestly, including AI assistant panels in 3 shells that sit in flow on desktop and become a Sheet on smaller screens.
Section nav that folds for small screens: pills and board view tabs into a bottom Drawer, tabs into a current-section DropdownMenu, and rails into a left Sheet that closes when you pick a route.
Sonner toasts for actions in 5 shells. The shells do not mount a Toaster, so your app mounts one for them to show.

Shells Built for a Specific Kind of App

2 mail shells handle the split-pane inbox properly. One pairs a folder icon rail with a wide 440px message list, live search, filter tabs, rich preview rows, and a selected-message action header for reply, star, and delete. The other is a fuller webmail layout with a compose dialog, folders, labels, contacts, a reading pane, and a right icon rail.

3 calendar layouts cover scheduling: an inset sidebar with a date picker, an up-next agenda, and a Day, Week, Month switcher; a dual-pane icon rail that swaps between mini calendar accounts, a date-grouped schedule, searchable contacts, and notifications; and a slide-in right calendar context panel over a dark nav rail.

For AI products there is a chat workspace with a model picker grid, pinned and recent threads, and an InputGroup composer, an agents console with collapsible agent nav and active-project rings, and a task workspace whose AI assistant panel toggles in beside the list. A community feed shell puts a full-width header above the icon rail for social and content apps.

Fleet and security teams get 12 consoles. A mission control shell pairs an icon rail with a 4-tab panel whose Robots tab holds a tick chart with 1 tick per mission, a run stats strip, and robot rows that expand into a timestamped event feed, all inside a ReUI Frame. A security console adds a Run Scan action, Cmd or Ctrl+K search, and a 15-item notifications Popover around its scope tree. A fleet protection shell pairs live Endpoints and Threats counts with a 5-tab New Mission Dialog whose status, assignee, due date, priority, and label pickers are Combobox fields, and an Open Chat button docks an AI assistant that answers from 12 fleet runbooks and lists the ones it read.

For finance teams, an accounts payable shell runs a 3-way invoice matching queue with search, a filter for Review, Ready, and Overdue orders, an actions menu on the active check, and an Ask AI button that docks an advisor answering from 12 AP policies.

For design and planning tools, a whiteboard shell keeps a fixed 48px icon rail of 10 sections beside a header that centers Board, Outline, Comments, and Activity views from lg and moves them into a bottom Drawer below it, with an editing-now Avatar stack, Share and Export, and a board menu that confirms Delete Board in an AlertDialog.

Related Shadcn Application Block Categories

Navbar (13) Top navigation bars for apps that are mostly full-width pages and do not need a persistent sidebar shell.
Dashboard (8) Complete overview screens to render inside the content region of a shell, with metrics, charts, and a work queue.
Settings (16) Grouped preference pages that slot into the secondary nav of a two-level shell without extra layout work.
Sheet (24) Side drawers and detail panels for the record inspection flows a shell opens from a list or grid row.
List (11) Record, contact, and activity rows for the middle pane of split-view shells such as mail and task workspaces.
Profile (10) Account and member pages for the destination behind the avatar menu every one of these shells ships with.

All Shadcn Block Groups

Browse the full ReUI Shadcn blocks library by product surface. Each group bundles category-level blocks you can mix and match across your project.

Shadcn Application Blocks (303) Browse 303 Shadcn Application blocks across 23 categories.
Shadcn Data Grid Blocks (47) Browse 47 Shadcn Data Grid blocks across 9 categories.
Shadcn Charts Blocks (52) Browse 52 Shadcn Charts blocks across 10 categories.
Shadcn Solutions Blocks (76) Browse 76 Shadcn Solutions blocks across 11 categories.
Shadcn AI & Agents Blocks (22) Browse 22 Shadcn AI & Agents blocks across 3 categories.
Shadcn eCommerce Blocks (87) Browse 87 Shadcn eCommerce blocks across 13 categories.
Shadcn Marketing Blocks (67) Browse 67 Shadcn Marketing blocks across 8 categories.

Frequently Asked Questions

What is the difference between an app shell block and a navbar block?

A shell is the whole page frame: navigation, header, content region, and the responsive rules that tie them together. A navbar block is only the top bar. Choose a shell when every route in your product should render inside a single persistent layout, and a navbar when your app is mostly full-width pages that just need consistent top navigation. The only shell here with no sidebar still ships a page header, an 8-tab view track, and a content panel under its top bar.

Do the sidebars actually collapse and remember their state?

20 of the 35 collapse to icons through the shadcn Sidebar primitive, so the collapse, the Cmd or Ctrl+B shortcut, and the sidebar_state cookie come from the primitive rather than from custom code in the block. The primitive only writes that cookie, so read it in your layout to restore the state after a reload. Another 3 fold their rail to a 48px icon strip in their own code, 2 fold a side panel into a fixed icon rail through the primitive's provider state, and the rest slide the sidebar off canvas, keep their rail fixed, or have no sidebar at all, with a Sheet or a dropdown taking over on small screens.

Can I use one of these as a Next.js layout?

Yes, and that is the usual approach. Lift the shell into your route group layout and render children inside the content region. Because nav items are a plain array in the file, you can drive them from your own route config or permissions without touching the markup, and the breadcrumb header can read from the active route instead of the sample data.

Can I restyle the shell to match my brand?

Yes. The shells are Tailwind CSS over shadcn tokens, so theme variables restyle most of a shell at once. A few pin colors on purpose: the dark topbar and the dark rail variants use fixed zinc surfaces, the glass rail and pill nav over the photo band stay dark with white ink, the Fleet Center side card stays dark in both themes through a dark class on the card, and the color wash shell uses a fixed mauve ink on white surfaces in light mode, then returns to theme tokens in dark mode. The ReUI customizer lets you set base, style, radius, and icon set before you copy, so the shell arrives matching the components you already have in the project.

Start building with ReUI Pro today.

Every Pro block, every style, and every future addition, with one license for unlimited projects.

Get All-Access

From $249, once. Lifetime updates.