Patterns

Composed "recipes" demonstrating how to combine components for common UI needs.

Page Shell

Base layout with loading, error, and empty states

Layout

Settings Page

Modular settings with sections (Appearance, Experiments, Security)

Pages

Docs Nav + Viewer

Documentation navigation with markdown viewer composition

Docs

Form Validation

Form input validation patterns with inline errors

Forms
Planned

Page Shell Pattern

The PageShell component provides a consistent base for all pages with built-in loading, error, and empty states.

Usage

<script>
  import { PageShell } from '@steamco/design-system';
  
  let loading = true;
  let error = null;
</script>

<PageShell 
  title="Settings" 
  subtitle="Manage your preferences"
  {loading} 
  {error}
>
  <!-- Your page content -->
</PageShell>

States

Loading

Shows centered loading indicator

Error

Shows error message with retry hint

Empty

Shows customizable empty message

Content

Renders slot content with header