Skip to content
Component installs need the registry setup— the Base UI shadcn project, the @vegastack namespace and the Cloudflare Access service token.
VegaStack Design

app-shell-01

A full application shell page — the landmark trio and skip link, a collapsible rail, a breadcrumb header and a content grid.

Last updated

Skip to content
Active agents
12
+2 this week
Tasks completed
1,284
+18.2%
Avg. resolution
4m 12s
-31s
Escalations
7
-3
Your content
Replace this region with the page a route actually renders. Everything above it — the rail, the banner, the skip link — belongs in a shared layout once there is more than one route.

What it is

A full application shell page — AppShell's landmark trio and skip link, a collapsible sidebar, a breadcrumb header and a content area with sample cards. It is a block: you pull it once with shadcn add, and then you own it — nothing re-pulls it and no integrity hash tracks your edits, unlike the components it composes.

Install

npx shadcn@latest add @vegastack/app-shell-01

This installs the block's own files plus the components it composes: app-shell, breadcrumb, button, card, sidebar.

Preview

Skip to content
Active agents
12
+2 this week
Tasks completed
1,284
+18.2%
Avg. resolution
4m 12s
-31s
Escalations
7
-3
Your content
Replace this region with the page a route actually renders. Everything above it — the rail, the banner, the skip link — belongs in a shared layout once there is more than one route.

Files

FileRegistry typeTarget
app-shell-01/components/app-sidebar.tsxregistry:componentapp/app-shell-01/components/app-sidebar.tsx
app-shell-01/page.tsxregistry:pageapp/app-shell-01/page.tsx

Do / Don't

Do
Pull it once, then edit it freely — replace the sample data, the links and the copy with your own.
Don't
Treat it as an update-tracked component, or re-pull it and expect your edits to survive.

On this page