Patterns

36 theme-agnostic patterns. Compose core atoms, reference tokens, adapt to any theme.

Heroes

  • HeroCentered — Centered text hero with title, subtitle, and optional CTA button.
  • HeroFull — Full-width hero with optional background image and centered content overlay.
  • HeroSplit — 50/50 split hero with content on one side and image on the other. Supports reverse layout.

Cards

  • AuthCard — Authentication form card with dynamic fields, submit button, and footer slot.
  • ContactCard — Person or record card with avatar, status badge, and contact info.
  • FeatureCard — Feature highlight card with icon, title, and description text.
  • MetricCard — Dashboard KPI card with label, value, change indicator, and trend direction.
  • PricingCard — Pricing tier card with price, features list, CTA, and highlighted variant.
  • ProfileCard — Person card with avatar, bio, and action buttons.
  • TestimonialCard — Quote card with attribution, avatar, and role.

Data

  • ComparisonTable — Feature comparison matrix across multiple products with badge support.
  • DataTableFull — Full data table with sortable columns, badge cell values, and optional caption.
  • DataTableRow — Single data row with label, value, optional secondary text and status badge.
  • FieldRow — Label-value pair for displaying key-value information.
  • StatsRow — Horizontal row of statistics with labels, values, and trend indicators.

Navigation

  • NavBar — Top navigation bar with logo, links, and action slots.
  • PageHeader — Page title with breadcrumbs, description, and optional action buttons.
  • SearchBar — Search form with input, submit button, and optional filter slot.
  • SideNav — Sidebar navigation with grouped sections and active state.

Communication

  • ActivityItem — Timeline or feed entry with user avatar, action text, and timestamp.
  • AlertBanner — Full-width notification banner with message, variant, and optional action.
  • CommentThread — Comment with user avatar, body text, timestamp, and reply action.
  • NotificationItem — Notification entry with user avatar, message, timestamp, and unread state.
  • TimelineGroup — Groups timeline entries under a date heading.

Content

  • Carousel — CSS scroll-snap carousel with navigation arrows, dots, and IntersectionObserver-based slide tracking.
  • CodeBlock — Code display with optional filename header and copy button.
  • Footer — Site footer with column links, logo, and legal text.
  • SectionHeader — Section title with optional eyebrow badge, subtitle, and alignment control.
  • SettingsRow — Settings option with label, description, and control slot.

Forms

  • Form — Wraps FormField children in a <form> with Grid layout, gating submit behind validation of all registered fields.
  • FormField — Wraps a form atom with validation rules, managing dirty/touched/error state and injecting the resolved error string via cloneElement.
  • FormSection — Groups related form fields under a heading with optional description.

States

  • EmptyState — Empty view placeholder with icon, title, description, and action button.
  • ErrorState — Error display with retry action.
  • LoadingState — Skeleton loading placeholder with configurable lines, avatar, and heading.