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.

• App Shell 1 Collapsible icon-rail sidebar app shell with workspace switcher, nested nav, and user menu
• App Shell 2 Floating icon-collapsible sidebar shell with command-K search, nested nav, and workspace switcher
• App Shell 3 Inset sidebar app shell with per-project progress rings and a multi-type notifications popover
• App Shell 4 Mail inbox app shell with icon-rail folder sidebar, wide message list, and selected-message action header
• App Shell 5 Calendar app shell, icon-rail sidebar switching Calendar, Schedule, Contacts, Notifications panels
• App Shell 6 Dual Sidebar App Shell with Dark Nav Rail and Slide-In Calendar Context Panel
• App Shell 7 Breadcrumb-switcher sidebar app shell with org/app/environment dropdowns and a live system monitor popover
• App Shell 8 Inset icon-rail sidebar app shell with per-section secondary nav, org/app/env switchers, and notifications
• App Shell 9 Dark inset-sidebar team workspace shell with member presence rail and notifications feed
• App Shell 10 AI Agents App Shell with Collapsible Sidebar, Active-Project Rings, and Rich Notifications
• App Shell 11 Operations sidebar app shell with four toggleable regions and a resizable bottom workbench sheet
• App Shell 12 Icon-rail sidebar app shell with command-K search, notifications feed, apps grid, and theme menu
• App Shell 13 Community feed app shell with full-width header above a collapsible icon-rail sidebar
• App Shell 14 Mini icon-rail sidebar app shell with per-section secondary nav and a tabbed workspace toolbar
• App Shell 15 Dark full-width topbar app shell with workspace switcher, pinnable sidebar nav, and favorites
• App Shell 16 Dual sidebar app shell with icon rail and collapsible secondary navigation panel
• App Shell 17 AI chat assistant app shell with floating sidebar, model picker grid, and prompt composer
• App Shell 18 Task workspace app shell with collapsible floating sidebar and a toggleable AI chat assistant panel
• App Shell 19 Calendar app shell with inset sidebar date picker, up-next agenda, and Day/Week/Month view switcher
• App Shell 20 Mail client app shell with folder sidebar, split list and reading panes, and icon app rail
• App Shell 21 AI chat app shell with resizable thread sidebar, collapsible icon rail, and model picker
• App Shell 22 Photo banner app shell with crossfading hero images, pixel dissolve, glass icon rail and pill nav
• App Shell 23 Team and project switcher topbar app shell with indented sidebar route groups and a 3x3 apps menu
• App Shell 24 Inset notifications sheet app shell with route search palette and topbar section pills
• App Shell 25 Mission control app shell with icon rail, 4-tab missions panel and expandable robot event feeds
• App Shell 26 Security console app shell with icon scope tabs and a drag-to-reorder collapsible scope tree
• App Shell 27 Searchable route sidebar shell with a 48px icon rail fold and a Security, Assets, Events scope tree
• App Shell 28 Single rounded-panel app shell framing a grouped nav rail and body under top icon section tabs
• App Shell 29 Section tile rail shell with a 3x3 tile grid, workspace tabs and a status-badged robot network tree
• App Shell 30 Sidebar-free top nav app shell with an 8-tab segmented view track and a count-badge page header
• App Shell 31 Folder-tab workspace app shell with floating pill-group rail, color wash and assistant column

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 2 shells sub-scopes reorder by drag handle through ReUI Sortable and inline Add actions append draft rows, and a third pairs its tree with a 3 by 3 grid of section tiles.
• 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 an AI assistant panel that sits in flow on desktop and becomes a Sheet on mobile.
• Section nav that folds for small screens: pills into a bottom Drawer, tabs into a current-section DropdownMenu, and rails into a left Sheet that closes when you pick a route.

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 10 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, and a photo banner shell raises an access request toast through sonner, so your app has to mount a sonner Toaster for it to show.

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 (11) 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 (307) Browse 307 Shadcn Application blocks across 22 categories.
• Shadcn Data Grid Blocks (38) Browse 38 Shadcn Data Grid blocks across 8 categories.
• Shadcn Solutions Blocks (66) Browse 66 Shadcn Solutions blocks across 9 categories.
• Shadcn eCommerce Blocks (87) Browse 87 Shadcn eCommerce blocks across 13 categories.
• Shadcn Marketing Blocks (60) Browse 60 Shadcn Marketing blocks across 8 categories.
• Shadcn AI & Agents Blocks (17) Browse 17 Shadcn AI & Agents blocks across 2 categories.