App Shells

Full application shell layouts — collapsible sidebars, dashboard shells, split panes, and command palette wrappers.

App Shell

Full application shell with collapsible sidebar, header actions, mobile drawer, and nested navigation sections.

Preview

Dashboard

Welcome back, Alice. Here's what's happening.

App Shell.tsx
import { AppShell } from "@launchapp/design-system/blocks/layout";const navSections = [  {    title: "Main",    items: [      { label: "Dashboard", href: "/dashboard", isActive: true },      { label: "Analytics", href: "/analytics" },      { label: "Projects", href: "/projects", badge: "3" },    ],  },  {    title: "Settings",    items: [      { label: "Profile", href: "/settings/profile" },      { label: "Billing", href: "/settings/billing" },    ],  },];export default function Page() {  return (    <AppShell      navSections={navSections}      user={{ name: "Alice Johnson", email: "alice@example.com", avatarFallback: "AJ" }}      collapsible    >      <div className="p-6">Page content goes here</div>    </AppShell>  );}

Dashboard Layout

Dashboard layout with optional sticky header and 1–3 column arrangements for side panels and main content.

Preview
Dashboard

Main Content

Charts and data tables go here.

Dashboard Layout.tsx
import { DashboardLayout } from "@launchapp/design-system/blocks/layout";export default function Page() {  return (    <DashboardLayout      columns={2}      header={<div className="px-6 py-3 border-b">Header</div>}      leftPanel={<aside className="p-4 border-r">Side panel</aside>}    >      <div className="p-6">Main content</div>    </DashboardLayout>  );}

Collapsible Sidebar

Standalone collapsible sidebar with icon-only collapsed state, nested sections, badge support, and user footer.

Preview

CollapsibleSidebar — use within a SidebarLayout or as a standalone sidebar

Collapsible Sidebar.tsx
import { CollapsibleSidebar } from "@launchapp/design-system/blocks/app";const sections = [  {    title: "Main",    items: [      { label: "Dashboard", href: "#", icon: "grid" as const, isActive: true },      { label: "Analytics", href: "#", icon: "chart" as const },    ],  },];export default function Page() {  return (    <CollapsibleSidebar      sections={sections}      user={{ name: "Alice Johnson", email: "alice@example.com", avatarFallback: "AJ" }}    />  );}

Icon-Only Sidebar Shell

Full-page shell with an icon-only sidebar, tooltips on hover, and grouped navigation sections.

Preview

Icon-Only Sidebar

Hover over the icons for labels.

Icon-Only Sidebar Shell.tsx
import { IconOnlySidebarShell } from "@launchapp/design-system/blocks/layout";const sections = [  {    items: [      { id: "dashboard", label: "Dashboard", href: "#", icon: <span>⊞</span>, isActive: true },      { id: "analytics", label: "Analytics", href: "#", icon: <span>📈</span> },    ],  },];export default function Page() {  return (    <IconOnlySidebarShell sections={sections}>      <div className="p-6">Page content</div>    </IconOnlySidebarShell>  );}

Dual Panel Sidebar Shell

Two-level sidebar shell with a primary icon rail and secondary expandable panel, ideal for complex navigation trees.

Preview

Dual Panel Shell

Icon rail + contextual secondary panel.

Dual Panel Sidebar Shell.tsx
import { DualPanelSidebarShell } from "@launchapp/design-system/blocks/layout";const sections = [  {    id: "main",    label: "Main",    icon: <span>⊞</span>,    items: [      { id: "dash", label: "Dashboard", href: "#", isActive: true },      { id: "analytics", label: "Analytics", href: "#" },    ],  },];export default function Page() {  return (    <DualPanelSidebarShell sections={sections} title="My App">      <div className="p-6">Page content</div>    </DualPanelSidebarShell>  );}

Command Palette Shell

App shell with a built-in ⌘K command palette for quick navigation, actions, and search.

Preview

Command Palette Shell wraps your app with a ⌘K accessible command palette.

Command Palette Shell.tsx
import { CommandPaletteShell } from "@launchapp/design-system/blocks/layout";const groups = [  {    id: "navigation",    label: "Navigation",    actions: [      { id: "dashboard", label: "Dashboard", href: "#", shortcut: "D" },      { id: "settings", label: "Settings", href: "#", shortcut: "S" },    ],  },];export default function Page() {  return (    <CommandPaletteShell groups={groups} triggerShortcut="k">      <div className="p-6">Press ⌘K to open palette</div>    </CommandPaletteShell>  );}

Split Pane Layout

Resizable split-pane layout supporting horizontal and vertical orientations, with configurable panel sizes.

Preview
Left Panel

File tree, navigation, or secondary content.

Main Panel

Primary content, editor, or detail view.

Split Pane Layout.tsx
import { SplitPaneLayout } from "@launchapp/design-system/blocks/layout";export default function Page() {  return (    <SplitPaneLayout      orientation="horizontal"      primaryPanel={<div className="p-4 h-full bg-muted/30">Primary panel</div>}      secondaryPanel={<div className="p-4 h-full">Secondary panel</div>}      defaultSplit={60}    />  );}

Mobile Nav Drawer Shell

Full app shell with slide-in mobile navigation drawer and overlay.

Preview

Tap the button to open the mobile navigation drawer.

Mobile Nav Drawer Shell.tsx
import { MobileNavDrawerShell } from "@launchapp/design-system/blocks/layout";const navItems = [  { id: "home", label: "Home", href: "/", icon: <span>🏠</span>, isActive: true },  { id: "projects", label: "Projects", href: "/projects", icon: <span>📁</span> },  { id: "settings", label: "Settings", href: "/settings", icon: <span>⚙️</span> },];export default function Page() {  return (    <MobileNavDrawerShell navItems={navItems}>      <div className="p-6">        <h1 className="text-xl font-semibold">Mobile App</h1>        <p className="mt-2 text-muted-foreground">Tap the menu icon to open navigation.</p>      </div>    </MobileNavDrawerShell>  );}

Multi Panel Layout

Flexible multi-panel application layout with configurable pane arrangement.

Preview
Center Panel
Multi Panel Layout.tsx
import { MultiPanelLayout } from "@launchapp/design-system/blocks/layout";export default function Page() {  return (    <div className="h-[480px]">      <MultiPanelLayout        leftPanel={<div className="p-4 h-full bg-muted/30">Navigation / File Tree</div>}        mainPanel={<div className="p-4 h-full">Editor / Main Content</div>}        rightPanel={<div className="p-4 h-full bg-muted/20">Inspector / Properties</div>}      />    </div>  );}

Layout Empty State

Centered empty state with variant presets (default, search, error, inbox, folder), icon, title, description, and action buttons.

Preview

No files yet

Upload your first file to get started.

Layout Empty State.tsx
import { EmptyState } from "@launchapp/design-system/blocks/layout";export default function Page() {  return (    <EmptyState      variant="folder"      title="No files yet"      description="Upload your first file to get started."      action={{ label: "Upload file", onClick: () => console.log("upload") }}      secondaryAction={{ label: "Learn more", onClick: () => console.log("learn") }}    />  );}

Multi Panel Layout

Three-column layout with configurable left, center, and right panels and optional header.

Preview
Center Panel
Multi Panel Layout.tsx
import { MultiPanelLayout } from "@launchapp/design-system/blocks/layout";export default function Page() {  return (    <MultiPanelLayout      leftPanel={<div className="p-4">Navigation</div>}      centerPanel={<div className="p-4">Main Content</div>}      rightPanel={<div className="p-4">Details</div>}    />  );}
← PreviousMarketing
Next →Admin