App shell

A product's first screen, not a component catalogue: something that summarises state (four StatTiles), something actionable (the board table, with selection driving an ActionBar) and something navigable (the rail: a Steps checklist, an activity list of Items, and an inert-gated preview of a feature that is not shipped yet).

It is also where the five sidebar composites the library no longer ships are written out by hand — the hall switcher, the nav with its active-path and mobile-close policy, the user footer, the breadcrumb trail with a collapsed middle. That hand-composition is the documentation: an arrangement does not have to become a component, and here you can read the whole of it.

The layout is the canonical shadcn model, and it is the whole reason a fixed rail and a full-width header are mutually exclusive: SidebarProvider is the viewport frame, and ShellHeader / ShellMain / ShellFooter live inside SidebarInset, to the inline end of the rail — never spanning it. SidebarInset carries no landmark; ShellMain owns the page's single <main>, and every block nested under it is a <section>.

It exists because the pieces only prove themselves together. A StatTile looks fine in a 384px box; whether four of them sit correctly under a page header, beside a table whose toolbar has to survive the rail collapsing to icons, is a different question — and the one a consumer has.

Worth exercising in the frame:

• ⌘+B collapses the rail to icons; the switcher and user rows fall back to bare avatars and the header does not shift under it.
• ⌘+K opens the Command palette; T opens the Preferences drawer and re-themes the screen live.
• Tick rows in the table — the ActionBar rises with the count. Facet-filter by status or region, hide columns from View, sort, page.
• Take the tour runs a four-step Tour over the rail, the KPI row and the table toolbar.

Source

docs/showcases/app-shell/
├── default.tsx          — the screen
├── board-table.tsx      — the table, built from the /table parts (selection, facets, view options)
├── command-palette.tsx  — the ⌘K palette behind the header's search button
└── data.tsx             — one hall's instances, nav, KPIs, board and activity, all derived

Three entry points: @kanzo-tech/ui for the shell and composites, @kanzo-tech/ui/table for the data table (a subpath, so the base bundle never carries TanStack Table) and @kanzo-tech/ui/analytics for StatTile — the one tile form that needs no Mosaic coordinator, which is why this screen carries no chart: four headline numbers are a KPI row, not a plot.