Templates

Page layouts that compose organisms into reusable structures. Templates define where things go, not what data they display.

DashboardLayout
Authenticated user area with collapsible sidebar and fixed header
View Live

Features

  • •Collapsible sidebar with Rainbow metric nav
  • •Fixed header with search (⌘K), notifications, user menu
  • •Theme toggle integration
  • •Responsive main content area

Composed Organisms

DashboardSidebarDashboardHeader
app/(dashboard)/layout.tsx
MarketingLayout
Public-facing pages with minimal chrome for landing, pricing, etc.
View Live

Features

  • •Minimal shell for marketing pages
  • •Future: Marketing header/nav
  • •Future: Marketing footer
  • •No authentication required

Composed Organisms

Minimal template - no organisms

app/(marketing)/layout.tsx
ShowcaseLayout
Component documentation with sidebar navigation
View Live

Features

  • •Fixed sidebar with section navigation
  • •Theme toggle
  • •Rainbow hearts branding
  • •Active state highlighting

Composed Organisms

Minimal template - no organisms

app/showcase/layout.tsx

📐 Templates in Atomic Design

Templates are the fourth level of Atomic Design. They provide context for organisms by placing them in a page structure. Templates use placeholder content to define layout - when real data is added, they become Pages.

Atoms→Molecules→Organisms→Templates→Pages