Web only
App shell
Available forWeb
sidebar of 4–8 destinations on desktop, a sheet on mobile · active item follows the URL
Usage
The frame of every logged-in web app prototype. Put it in the prototype’s layout.tsx, not in each page.
API
<AppShell brand nav={[{href,label,icon}]} footer? topbar?>{page}</AppShell>Get it
Already in every copy of the web kit:
import { AppShell } from '@/components/kit/app-shell';Details
- Exports
AppShell- Packages
- cn@^0.4.0, lucide-react@^1.52.0
- Installs with
- @kit/button, sheet
- Also searched as
- sidebar, layout, navigation, dashboard shell
- Registry JSON
- /r/web/app-shell.json
Agents: the whole registry is at /llms.txt.