build69
build69  /  Components  /  Page Structure  /  AppShell

AppShell

v1.0.19Updated 20 Oct 2026

Top-level frame that arranges Sidebar + Topbar + main content. Every full-page screen in build69 wraps in AppShell.

View source← Back to catalog

Preview

Live · 10 stories
DefaultOpen ↗
▸Why this is recommendedlayoutshellframeapp+1

The default, out-of-the-box AppShell.

Recommended for+14
  • ✓Every authenticated page
  • ✓Dashboard / list / detail compositions
  • ✓Workflow designer and other tool pages
Tags+6
layoutshellframeappdefault
Features+4
  • Composable slots: sidebar, topbar, main, agent bar
  • Collapsible sidebar state
  • Sidebar hover-expand floating overlay (peek) with pin-to-keep button
  • Configurable hover open / close delays
  • Sticky topbar + sticky agent bar
  • Responsive collapse on narrow viewports
  • Mobile drawer closes itself once a sidebar row navigates, including when the host routes client-side (closeDrawerOnNavigate)
  • Light & dark mode aware
  • i18n: labels prop overrides every built-in UI string (nav toggles, progress bar, pin/resize aria, drawer title) — see AppShellLabels / DEFAULT_APP_SHELL_LABELS
Not recommended for−2
  • ✕Public marketing pages (use a bespoke layout)
  • ✕Login or other unauthenticated screens

Install

Ask your agent, or call the MCP tool directly. The resolved bundle is written into your project.

get_registry_item({ name: "AppShell" })

Usage

import { AppShell } from '@/components/patterns/app-shell';
import { Sidebar } from '@/components/navigation/sidebar';
import { Topbar } from '@/components/navigation/topbar';

<AppShell sidebar={<Sidebar />} topbar={<Topbar />}>
  <main>...</main>
</AppShell>

Tick variants in the left menu — each adds a tab with that variant’s real story source, the same code the preview above renders.

Props

PropTypeRequired
sidebar

Sidebar element

ReactNodeyes
topbar

Topbar element

ReactNode—
agentBar

AgentBar element pinned bottom

ReactNode—
children

Main content area

ReactNodeyes
sidebarHoverExpand

Enable hover-expand floating overlay when collapsed

boolean—
sidebarHoverOpenDelay

Hover open delay in ms

number—
sidebarHoverCloseDelay

Hover close delay in ms

number—
mobileOpen

Control the mobile drawer; omit and AppShell keeps its own state

boolean—
onMobileOpenChange

Fires whenever the mobile drawer should open or close, including the automatic close after a row navigates

(open: boolean) => void—
closeDrawerOnNavigate

Close the mobile drawer once a sidebar row has navigated. Default true. A client-side route change is invisible to the shell otherwise, so the drawer and its overlay stayed over the new page

boolean—
labels

Override any built-in UI string — nav toggles, progress bar, pin/resize aria, drawer title (i18n). Merged over DEFAULT_APP_SHELL_LABELS.

Partial<AppShellLabels>—

Related

Platform docsAll componentsSource files