Layout Patterns

App Shell with Sidebar

The standard application layout with a collapsible sidebar.

import { SidebarProvider, Sidebar, SidebarContent } from "@timelycare/helix-ui"

<SidebarProvider>
  <div className="flex min-h-screen">
    <Sidebar>
      <SidebarContent>
        {/* Navigation */}
      </SidebarContent>
    </Sidebar>
    <main className="flex-1 p-6">
      {/* Page content */}
    </main>
  </div>
</SidebarProvider>

Structure

Page with Header

Standard page layout with a sticky header.

<div className="min-h-screen flex flex-col">
  <header className="sticky top-0 z-50 border-b bg-background/95 backdrop-blur">
    <div className="container flex h-16 items-center justify-between">
      <Logo />
      <nav className="flex items-center gap-4">
        {/* Navigation items */}
      </nav>
    </div>
  </header>
  <main className="flex-1">
    {/* Page content */}
  </main>
</div>

Header Specifications

Centered Content Page

For auth pages, single forms, or focused content.

<div className="min-h-screen flex items-center justify-center p-4">
  <Card className="w-full max-w-[420px]">
    <CardHeader>
      <CardTitle>Page Title</CardTitle>
      <CardDescription>Description text.</CardDescription>
    </CardHeader>
    <CardContent>
      {/* Content */}
    </CardContent>
  </Card>
</div>

Use Cases

• Login/signup forms
• Password reset
• Single-action pages
• Error pages (404, 500)

Dashboard Grid

For dashboard pages with multiple cards/widgets.

<div className="p-6 space-y-6">
  {/* Page header */}
  <div className="flex items-center justify-between">
    <div>
      <h1 className="text-3xl font-semibold">Dashboard</h1>
      <p className="text-muted-foreground">Overview of your account.</p>
    </div>
    <Button>Action</Button>
  </div>
  
  {/* Stats row */}
  <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-4">
    <Card>/* Stat card */</Card>
    <Card>/* Stat card */</Card>
    <Card>/* Stat card */</Card>
    <Card>/* Stat card */</Card>
  </div>
  
  {/* Main content grid */}
  <div className="grid gap-6 lg:grid-cols-2">
    <Card className="lg:col-span-1">/* Chart */</Card>
    <Card className="lg:col-span-1">/* Table */</Card>
  </div>
</div>

Grid Breakpoints

Settings Page

Multi-section settings with sidebar navigation.

<div className="flex gap-6 p-6">
  {/* Settings navigation */}
  <nav className="w-[200px] shrink-0">
    <div className="space-y-1">
      <Button variant="ghost" className="w-full justify-start">General</Button>
      <Button variant="ghost" className="w-full justify-start">Security</Button>
      <Button variant="ghost" className="w-full justify-start">Notifications</Button>
    </div>
  </nav>
  
  {/* Settings content */}
  <div className="flex-1 max-w-2xl space-y-6">
    <Card>
      <CardHeader>
        <CardTitle>Section Title</CardTitle>
        <CardDescription>Section description.</CardDescription>
      </CardHeader>
      <CardContent>
        {/* Settings form */}
      </CardContent>
    </Card>
  </div>
</div>

Settings Card Width

• Max width: max-w-2xl (672px)
• Prevents overly wide forms on large screens

List/Table Page

Standard CRUD list page with toolbar and pagination.

<div className="p-6 space-y-4">
  {/* Page header */}
  <div className="flex items-center justify-between">
    <h1 className="text-3xl font-semibold">Items</h1>
    <Button><Plus className="size-4 mr-2" />Add Item</Button>
  </div>
  
  {/* Toolbar */}
  <div className="flex items-center gap-4">
    <Input placeholder="Search..." className="max-w-sm" />
    <DropdownMenu>/* Filters */</DropdownMenu>
  </div>
  
  {/* Table */}
  <div className="rounded-md border">
    <Table>
      {/* Table content */}
    </Table>
  </div>
  
  {/* Pagination */}
  <div className="flex items-center justify-between">
    <p className="text-sm text-muted-foreground">Showing 1-10 of 100</p>
    <Pagination />
  </div>
</div>

Split View

Two-panel layout for master-detail interfaces.

<div className="flex h-[calc(100vh-64px)]"> {/* Subtract header height */}
  {/* Master list */}
  <div className="w-[320px] border-r overflow-y-auto">
    <div className="p-4 space-y-2">
      {/* List items */}
    </div>
  </div>
  
  {/* Detail panel */}
  <div className="flex-1 overflow-y-auto p-6">
    {/* Selected item details */}
  </div>
</div>

Use Cases

• Email clients
• Chat applications
• File browsers
• Documentation viewers

Modal/Dialog Centered

Standard dialog positioning.

<Dialog>
  <DialogContent className="sm:max-w-[425px]">
    <DialogHeader>
      <DialogTitle>Dialog Title</DialogTitle>
      <DialogDescription>Dialog description.</DialogDescription>
    </DialogHeader>
    {/* Content */}
    <DialogFooter>
      <Button variant="outline">Cancel</Button>
      <Button>Save</Button>
    </DialogFooter>
  </DialogContent>
</Dialog>

Dialog Widths

Page Spacing Guidelines

Responsive Patterns

Container Widths

// Full width with max constraint
<div className="container mx-auto px-4 max-w-7xl">

// Prose-width for reading content
<div className="max-w-prose mx-auto">

Stack to Grid

// Stack on mobile, grid on desktop
<div className="flex flex-col lg:flex-row gap-6">
  <div className="lg:w-1/3">/* Sidebar */</div>
  <div className="lg:flex-1">/* Main */</div>
</div>

See Also

Components Used:

• Sidebar, Card, Button
• Dialog, Table, Input
• Pagination

Related Patterns:

• Component Match - Feedback hierarchy and decision trees

Related Tokens:

• Breakpoints - Responsive breakpoints
• Spacing - Spacing scale

Last updated: January 16, 2026