App Layouts

Minimal app shells, collapsible sidebars, compact layouts, and page containers.

App Shell Minimal

Minimal full-page shell with header, sidebar, and main content area.

Preview

No preview available

See the code snippet below for usage.

App Shell Minimal.tsx

import { AppShellMinimal } from "@launchapp/design-system/blocks/app";export default function Page() {  return (    <AppShellMinimal      header={<div className="px-4 font-semibold">My App</div>}      sidebar={<nav className="p-4">Sidebar</nav>}    >      <div className="p-6">Main content</div>    </AppShellMinimal>  );}

Collapsible Sidebar

Sidebar that collapses to icon-only mode with a toggle button.

Preview

No preview available

See the code snippet below for usage.

Collapsible Sidebar.tsx

import { CollapsibleSidebar } from "@launchapp/design-system/blocks/app";const navItems = [  { id: "home", label: "Home", href: "/", icon: <span>🏠</span> },  { id: "settings", label: "Settings", href: "/settings", icon: <span>⚙️</span> },];export default function Page() {  return (    <CollapsibleSidebar navItems={navItems}>      <div className="p-6">Main content</div>    </CollapsibleSidebar>  );}

Compact Sidebar

Narrow icon-and-label sidebar suitable for dense application UIs.

Preview

No preview available

See the code snippet below for usage.

Compact Sidebar.tsx

import { CompactSidebar } from "@launchapp/design-system/blocks/app";const navItems = [  { id: "dashboard", label: "Dashboard", href: "/", icon: <span>⊞</span>, isActive: true },  { id: "analytics", label: "Analytics", href: "/analytics", icon: <span>📈</span> },];export default function Page() {  return (    <CompactSidebar navItems={navItems}>      <div className="p-6">Content</div>    </CompactSidebar>  );}

Dashboard Header

Top header bar with breadcrumbs, user menu, and action buttons.

Preview

No preview available

See the code snippet below for usage.

Dashboard Header.tsx

import { DashboardHeader } from "@launchapp/design-system/blocks/app";export default function Page() {  return (    <DashboardHeader      title="Dashboard"      breadcrumbs={[{ label: "Home", href: "/" }, { label: "Dashboard" }]}      actions={<button type="button">New</button>}    />  );}

Page Container

Centered content container with configurable max-width and padding.

Preview

No preview available

See the code snippet below for usage.

Page Container.tsx

import { PageContainer } from "@launchapp/design-system/blocks/app";export default function Page() {  return (    <PageContainer title="My Page" description="Page description here.">      <div>Content goes here</div>    </PageContainer>  );}

Settings Layout

Two-column settings layout with category sidebar and content area.

Preview

No preview available

See the code snippet below for usage.

Settings Layout.tsx

import { SettingsLayout } from "@launchapp/design-system/blocks/app";const sections = [  { id: "profile", label: "Profile", href: "/settings/profile" },  { id: "billing", label: "Billing", href: "/settings/billing" },];export default function Page() {  return (    <SettingsLayout sections={sections} activeSection="profile">      <div>Profile settings content</div>    </SettingsLayout>  );}

← PreviousAdmin

Next →Billing