build69
Sign inGet API key
build69  /  Components  /  Page Structure  /  AppShell

AppShell

v1.0.8Updated 27 Aug 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
  • 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—
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