Skip to content
38

App Shell.

App shells with sidebar and topbar, command palette and breadcrumbs: the frame a dashboard or admin tool starts from.

6 blocks, live at full size, install from here

01 / 06Collapsible Sidebar, ⌘K search, sortable table

App Shell 01

Drop-in admin shell built on the shadcn Sidebar primitive: collapsible icon rail with nav badges and an account menu in the footer, sticky topbar with breadcrumb and a ⌘K search that really focuses, plus an accounts table that filters live and sorts by any column with aria-sort.

npx shadcn@latest add https://hirael.com/r/app-shell-01.json

02 / 06Top nav, vertical tabs, settings that save

App Shell 02

Sidebar-free admin shell with a sticky top bar over a working settings screen: vertical tabs with roving keyboard focus, a header search that filters every section and counts matches per tab, and rows that actually do their thing (inline edit, copy to clipboard, or a switch) with a live save status.

npx shadcn@latest add https://hirael.com/r/app-shell-02.json

03 / 06Icon rail, arrow-key inbox, reading pane

App Shell 03

Split-pane inbox shell: icon rail with unread indicator, a searchable conversation listbox you can walk with the arrow keys, and a reading pane where star, archive and delete all work, with undo. Collapses to one pane on phones with a back button, and the composer sends on ⌘+Enter so Enter still makes a new line.

npx shadcn@latest add https://hirael.com/r/app-shell-03.json

04 / 06Inset Sidebar, ⌘K nav filter, campaign board

App Shell 04

Starter shell on the shadcn Sidebar primitive (inset variant): a workspace switcher that switches, a ⌘K field that filters the nav, icon-collapsible items with tooltips, an inset header with an account menu and notification count, and a campaign board overview with a stat row and four stage columns.

npx shadcn@latest add https://hirael.com/r/app-shell-04.json

05 / 06Inset sidebar, grouped nav, filterable documents

App Shell 05

Inset sidebar app shell: a collapsible icon sidebar with a brand header, grouped Workspace and Tools nav (with a Beta badge), and an account menu in the footer, paired with a sticky header carrying the sidebar toggle and a breadcrumb. The inset holds a documents list with status filters that actually filter.

npx shadcn@latest add https://hirael.com/r/app-shell-05.json

06 / 06Multi-level sidebar that slides to each section

App Shell 06

A nested app sidebar for shadcn/ui. Open a project or settings and the whole sidebar slides to its own links, like the Vercel dashboard, instead of expanding a dropdown. A back row slides out again, the breadcrumb follows the path, and multi-level menus go as deep as you need. Built from sidebar tokens, so it takes on your theme.

npx shadcn@latest add https://hirael.com/r/app-shell-06.json