Patterns · Application UI
App Shell
A single variant-driven application layout primitive, one `variant` prop swaps between ten full page scaffolds, each composed from the app-shell header / nav / sidebar / panel / toolbar / aside / footer / content slots.
@byronwade/foundation@byronwade/utils
Feature showcase
Installation
Features
2 examples
Default, Trading Desk.
API
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| variant | "dashboard" | "sidebar" | "stacked" | "three-column" | "master-detail" | "docs" | "editor" | "holy-grail" | "focused" | "command-center" | "dashboard" | Which full-page application layout scaffold to render. |
| className | string | - | Extra Tailwind classes merged onto the root element. |
Dependencies
| Package | Kind | Description |
|---|---|---|
| @byronwade/foundation | registry | Installed through the byronwade/ui registry. |
| @byronwade/utils | registry | Installed through the byronwade/ui registry. |
Source and related
| File | Path |
|---|---|
| Component | registry/components/app-shell.tsx |
| Default example | content/examples/app-shell/default.tsx |
| Trading Desk example | content/examples/app-shell/trading-desk.tsx |