App Shell

Application frame. Free, MIT · Navigation and layout › Structure

Installation

npx valyro-cli@latest add app-shell

npx shadcn@latest add https://valyro.xyz/r/app-shell.json

npm install valyro-ui

import 'valyro-ui/styles.css';
import { AppShell } from 'valyro-ui';

Props

Prop	Type	Default
`sidebar`	`Slot`		Navigation column, e.g. a `<Sidebar>`. A function receives the shell state (`sidebarCollapsed`, `mobile`…).
`header`	`Slot`		Top bar above the main area; stays put while the main area scrolls.
`aside`	`Slot`		Optional panel after the main area (details, inspector, settings).
`children`	`Slot`		Main content; it scrolls on its own. Or the compound form: `AppShell.Header`, `.Sidebar`, `.Main`, `.Aside` and `.Footer`, each holding what the prop of that name holds.
`footer`	`Slot`		Bar under the main area that stays put while it scrolls, e.g. a chat composer or bulk actions.
`sidebarCollapsed`	`boolean`		Icon-rail sidebar. Pair with `onSidebarCollapsedChange` (and storage) to remember it.
`defaultSidebarCollapsed`	`boolean`	`false`	Initial `sidebarCollapsed` when uncontrolled.
`onSidebarCollapsedChange`	`(collapsed: boolean) => void`		Called with the new `sidebarCollapsed` when it changes.
`asideOpen`	`boolean`		Whether the aside shows inline on wide shells.
`defaultAsideOpen`	`boolean`	`true`	Initial `asideOpen` when uncontrolled.
`onAsideOpenChange`	`(open: boolean) => void`		Called with the new `asideOpen` when it changes.
`mobileBreakpoint`	`number`	`768`	Below this shell width (px) the sidebar becomes an off-canvas drawer. Measured on the shell, not the window.
`asideBreakpoint`	`number`	`1200`	Below this shell width (px) the aside floats over the main area instead of taking a column.
`mainId`	`string`		Id of the main element, the skip link's target.
`labels`	`Partial<AppShellLabels>`		Overrides for the built-in English text; keys left out keep their defaults.

Compound parts

AppShell.Header (AppShellHeader), AppShell.Sidebar (AppShellSidebar), AppShell.Main (AppShellMain), AppShell.Aside (AppShellAside), AppShell.Footer (AppShellFooter)

Related components

Navbar — Top navigation bar
Sidebar — Side navigation panel
Resizable Panels — Panels with draggable dividers
Breadcrumbs — Breadcrumb trail
Tabs — Tabs
Segmented Control — Mode switcher
Pagination — Page navigation
Stepper — Step-by-step progress
Dropdown Menu — Dropdown menu
Context Menu — Right-click menu
Command Palette — ⌘K-style command menu
Keyboard Map Overlay — Keyboard shortcut map for a screen: search, keyboard view and practice mode

Previous: Progress Bar · Next: Navbar · All Navigation and layout