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

A shell is the whole page frame: sidebar, 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 one persistent layout, and a navbar when your app is mostly full-width pages that just need consistent top navigation.

Do the sidebars actually collapse and remember their state?

Yes. These build on the shadcn Sidebar primitive, so collapse to icon, offcanvas behaviour on mobile, the keyboard shortcut, and cookie-backed state that survives a reload all come from the primitive rather than from custom code in the block. The blocks add nav structure, switchers, footers, and headers on top of that.

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. Everything is Tailwind CSS over shadcn tokens, so theme variables restyle the entire shell at once, including the dark topbar and dark rail variants. 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.

Shadcn App Shell and Sidebar Layout Blocks

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 one opinionated skeleton.

They all build on the shadcn Sidebar primitive with ReUI Badge, Frame, and Rating, plus DropdownMenu, Popover, Avatar, Breadcrumb, Dialog, and Kbd for the chrome around them. Because the primitives are shared, moving between shells does not mean rewriting your nav data.

Roughly half are general-purpose dashboard shells. The rest are shaped around a specific app: mail, calendar, AI chat, task management, a community feed, an AI agents console, and a dense operations workbench.

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 folder rail, 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 app shell with org/app/environment dropdowns and a live system monitor popover
App Shell 8 Inset icon-rail 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 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 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

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, both collapsible to icon and both 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.
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.
Three-region workbench Resizable split panes, an expandable bottom workbench sheet, and a right calendar and agenda rail, using shadcn Resizable and Sheet.

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.
Workspace, org, app, and environment switchers with Avatar identity and keyboard-navigable DropdownMenu menus.
Notifications as a multi-type Popover in some shells and as a full feed panel inside the sidebar in others.
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.
Responsive behaviour that degrades honestly, including an AI assistant panel that sits in flow on desktop and becomes a Sheet on mobile.

Shells Built for a Specific Kind of App

Two 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.

Three 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.

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 (9) 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 (291) Browse 291 Shadcn Application blocks across 21 categories.
Shadcn Data Grid Blocks (35) Browse 35 Shadcn Data Grid blocks across 8 categories.
Shadcn Solutions Blocks (65) Browse 65 Shadcn Solutions blocks across 9 categories.
Shadcn eCommerce Blocks (87) Browse 87 Shadcn eCommerce blocks across 12 categories.
Shadcn Marketing Blocks (24) Browse 24 Shadcn Marketing blocks across 4 categories.

Frequently Asked Questions

Choose a Shell by Navigation Topology, Then by App Type