Skip to content
6

App Shell.

Sidebar + topbar layouts with command-palette and breadcrumb chrome.

5 blocks, live at full size, install from here

01 / 05Collapsible Sidebar · ⌘K search · sortable table

App Shell 1

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 / 05Top nav · vertical tabs · settings that save

App Shell 2

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 / 05Icon rail · arrow-key inbox · reading pane

App Shell 3

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 / 05Inset Sidebar · ⌘K nav filter · slot grid

App Shell 4

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 welcome heading over dashed placeholder slots.

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

05 / 05Inset sidebar · grouped nav · account menu

App Shell 5

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 stat row and a placeholder for page content.

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