Layout Components

Consistent page structure components for building app pages

5 Components

Composition Pattern

Responsive

Overview

Layout components provide a consistent structure for all app pages. They use a composition pattern where each component has a specific responsibility, making them flexible and easy to use together.

Pattern: Composition-based with slots/children

Responsive: Mobile-first with sm/md/lg breakpoints

Accessibility: ARIA labels, keyboard navigation, touch targets (44px min)

Components

PageTemplate

Root container with max-width control and consistent spacing. Provides the foundation for all page layouts.

PageHeader

Page header with title, subtitle, breadcrumbs, and action buttons. Handles responsive layout automatically.

Breadcrumb navigation

PageHeaderActions

Action button container with responsive mobile menu. Automatically collapses to Sheet on mobile.

PageFilters

Filter controls container for search and filters. Collapses to Sheet on mobile for better UX.

PageContent

Content wrapper with empty state support. Handles both populated and empty states with custom or default UI.

Typical Usage Pattern

Layout components are typically used together in this structure:

<PageTemplate>
  <PageHeader
    breadcrumbs={[{ label: "Catalog" }, { label: "Releases" }]}
    title="Releases"
    subtitle="Manage your music releases"
    actions={
      <PageHeaderActions>
        <Button>Add Release</Button>
      </PageHeaderActions>
    }
  />

  <PageFilters>
    <Input placeholder="Search..." />
    <Select>...</Select>
  </PageFilters>

  <PageContent>
    {/* Your page content */}
  </PageContent>
</PageTemplate>