Gallery

App shell

shadcn Sidebar with a switcher, search (⌘K), groups that fold, the user menu; folds to icons (⌘B); a sheet on phones.

Reference: Cloudflare dashboard sidebar (260 px, 34 px items, measured 2026-11-12)

Preview

Overview

What needs you comes first.

Focus rings

Overview

What needs you comes first.

In each theme: Default · Trackable · SkillDecks · BetterMarketer

Install

npx shadcn@4.23.0 add https://ui.dobrin-dobrev.co.uk/r/app-shell.json

Into an app set up with shadcn init --base radix; the parts it uses come with it.

Files

  • registry/default/blocks/app-shell.tsx → components/blocks/app-shell.tsx