React App Shell
The frame your application lives in: AppShell lays out a sidebar slot (pair it with Sidebar Nav) beside a scrollable content area under AppTopbar — breadcrumbs on the left; environment badge, TopbarBell with unread dot, and the user block (initials avatar, name, role) on the right. Ships with DangerZone, the destructive-bordered settings section for transfer/delete actions. The demo wraps a complete settings page built from the form kit.
Organization
Shown on reports and exports.
Notifications
Danger zone
Transfer ownership
Move this workspace to another organization admin.
Delete workspace
Permanently removes all dashboards, lots, and history.
A complete shell: SidebarNav + topbar with breadcrumbs, env badge, notifications, and user menu — wrapped around a settings page.
Installation
Depends on breadcrumbs; pairs naturally with sidebar-nav and form-layout.
Usage
Props
| Component | Key props | Description |
|---|---|---|
| AppShell | sidebar, topbar?, height? | Layout frame; height for embedded demos |
| AppTopbar | breadcrumbs?, actions?, user?, onUserClick? | Header bar |
| TopbarBell | unread?, onClick? | Notification icon with unread dot |
| DangerZone | title?, items: { label, description, action }[] | Destructive settings section |