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
App

Dashboard

Minimal app shell with clean navigation.

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
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
D
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
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

My Page

Page description here.

Content goes here

My Page

Page description here.

Content goes here

My Page

Page description here.

Content goes here
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

Profile

Profile settings content.
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