diff --git a/src/App.tsx b/src/App.tsx
index 4ac17ca..2107880 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -4,6 +4,7 @@ import { Metrics } from './pages/Metrics/Metrics'
 import { RouteDetail } from './pages/RouteDetail/RouteDetail'
 import { ExchangeDetail } from './pages/ExchangeDetail/ExchangeDetail'
 import { AgentHealth } from './pages/AgentHealth/AgentHealth'
+import { Inventory } from './pages/Inventory/Inventory'
 
 export default function App() {
   return (
@@ -13,6 +14,7 @@ export default function App() {
       <Route path="/routes/:id" element={<RouteDetail />} />
       <Route path="/exchanges/:id" element={<ExchangeDetail />} />
       <Route path="/agents" element={<AgentHealth />} />
+      <Route path="/inventory" element={<Inventory />} />
     </Routes>
   )
 }
diff --git a/src/pages/Inventory/Inventory.module.css b/src/pages/Inventory/Inventory.module.css
new file mode 100644
index 0000000..fc58819
--- /dev/null
+++ b/src/pages/Inventory/Inventory.module.css
@@ -0,0 +1,87 @@
+.page {
+  min-height: 100vh;
+  background: var(--bg-body);
+  font-family: var(--font-body);
+}
+
+.header {
+  position: sticky;
+  top: 0;
+  z-index: 10;
+  background: var(--bg-surface);
+  border-bottom: 1px solid var(--border);
+  padding: 12px 24px;
+  display: flex;
+  align-items: center;
+  gap: 16px;
+}
+
+.headerTitle {
+  font-size: 18px;
+  font-weight: 600;
+  color: var(--text-primary);
+  margin: 0;
+}
+
+.backLink {
+  font-size: 13px;
+  color: var(--amber);
+  text-decoration: none;
+  margin-left: auto;
+}
+
+.backLink:hover {
+  text-decoration: underline;
+}
+
+.body {
+  display: flex;
+  gap: 0;
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 24px;
+}
+
+.nav {
+  width: 200px;
+  flex-shrink: 0;
+  position: sticky;
+  top: 57px;
+  height: calc(100vh - 57px);
+  overflow-y: auto;
+  padding-right: 16px;
+}
+
+.navSection {
+  margin-bottom: 8px;
+}
+
+.navLabel {
+  font-size: 11px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  color: var(--text-muted);
+  padding: 8px 8px 4px;
+  display: block;
+}
+
+.navLink {
+  display: block;
+  font-size: 13px;
+  color: var(--text-secondary);
+  text-decoration: none;
+  padding: 4px 8px;
+  border-radius: var(--radius-sm);
+  line-height: 1.5;
+}
+
+.navLink:hover {
+  background: var(--bg-hover);
+  color: var(--text-primary);
+}
+
+.content {
+  flex: 1;
+  min-width: 0;
+}
diff --git a/src/pages/Inventory/Inventory.tsx b/src/pages/Inventory/Inventory.tsx
new file mode 100644
index 0000000..8fa13e7
--- /dev/null
+++ b/src/pages/Inventory/Inventory.tsx
@@ -0,0 +1,37 @@
+import { Link } from 'react-router-dom'
+import styles from './Inventory.module.css'
+import { PrimitivesSection } from './sections/PrimitivesSection'
+
+const NAV_ITEMS = [
+  { label: 'Primitives', href: '#primitives' },
+  { label: 'Composites', href: '#composites' },
+  { label: 'Layout', href: '#layout' },
+]
+
+export function Inventory() {
+  return (
+    <div className={styles.page}>
+      <header className={styles.header}>
+        <h1 className={styles.headerTitle}>Component Inventory</h1>
+        <Link to="/" className={styles.backLink}>← Back to app</Link>
+      </header>
+
+      <div className={styles.body}>
+        <nav className={styles.nav} aria-label="Component categories">
+          <div className={styles.navSection}>
+            <span className={styles.navLabel}>Categories</span>
+            {NAV_ITEMS.map((item) => (
+              <a key={item.href} href={item.href} className={styles.navLink}>
+                {item.label}
+              </a>
+            ))}
+          </div>
+        </nav>
+
+        <main className={styles.content}>
+          <PrimitivesSection />
+        </main>
+      </div>
+    </div>
+  )
+}
diff --git a/src/pages/Inventory/sections/PrimitivesSection.module.css b/src/pages/Inventory/sections/PrimitivesSection.module.css
new file mode 100644
index 0000000..24d9c69
--- /dev/null
+++ b/src/pages/Inventory/sections/PrimitivesSection.module.css
@@ -0,0 +1,74 @@
+.section {
+  margin-bottom: 40px;
+}
+
+.sectionTitle {
+  font-size: 22px;
+  font-weight: 700;
+  color: var(--text-primary);
+  margin: 0 0 24px;
+}
+
+.componentCard {
+  background: var(--bg-surface);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-md);
+  padding: 20px;
+  margin-bottom: 16px;
+  box-shadow: var(--shadow-sm);
+}
+
+.componentTitle {
+  font-size: 14px;
+  font-weight: 600;
+  color: var(--text-primary);
+  margin: 0 0 4px;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.componentDesc {
+  font-size: 12px;
+  color: var(--text-muted);
+  margin: 0 0 16px;
+}
+
+.demoArea {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 12px;
+  align-items: flex-start;
+}
+
+.demoAreaColumn {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  align-items: flex-start;
+}
+
+.demoAreaRow {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 12px;
+  align-items: center;
+}
+
+.demoLabel {
+  font-size: 11px;
+  color: var(--text-muted);
+  font-weight: 500;
+}
+
+.demoGroup {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.demoGroupRow {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
diff --git a/src/pages/Inventory/sections/PrimitivesSection.tsx b/src/pages/Inventory/sections/PrimitivesSection.tsx
new file mode 100644
index 0000000..148bb60
--- /dev/null
+++ b/src/pages/Inventory/sections/PrimitivesSection.tsx
@@ -0,0 +1,591 @@
+import { useState } from 'react'
+import styles from './PrimitivesSection.module.css'
+import {
+  Alert,
+  Avatar,
+  Badge,
+  Button,
+  Card,
+  Checkbox,
+  CodeBlock,
+  Collapsible,
+  DateRangePicker,
+  DateTimePicker,
+  EmptyState,
+  FilterPill,
+  FormField,
+  InfoCallout,
+  Input,
+  KeyboardHint,
+  Label,
+  MonoText,
+  Pagination,
+  ProgressBar,
+  RadioGroup,
+  RadioItem,
+  SectionHeader,
+  Select,
+  Skeleton,
+  Sparkline,
+  Spinner,
+  StatCard,
+  StatusDot,
+  Tag,
+  Textarea,
+  Toggle,
+  Tooltip,
+} from '../../../design-system/primitives'
+
+// ── helpers ──────────────────────────────────────────────────────────────────
+
+interface DemoCardProps {
+  id: string
+  title: string
+  description: string
+  children: React.ReactNode
+}
+
+function DemoCard({ id, title, description, children }: DemoCardProps) {
+  return (
+    <div id={id} className={styles.componentCard}>
+      <h3 className={styles.componentTitle}>{title}</h3>
+      <p className={styles.componentDesc}>{description}</p>
+      <div className={styles.demoArea}>{children}</div>
+    </div>
+  )
+}
+
+// ── Sample data ───────────────────────────────────────────────────────────────
+
+const SPARKLINE_DATA = [10, 25, 15, 30, 20, 35, 28]
+
+const CODE_JSON = JSON.stringify(
+  { status: 'ok', version: '2.4.1', routes: 42 },
+  null,
+  2,
+)
+
+// ── PrimitivesSection ─────────────────────────────────────────────────────────
+
+export function PrimitivesSection() {
+  // Alert state
+  const [alertDismissed, setAlertDismissed] = useState(false)
+
+  // Checkbox state
+  const [checked1, setChecked1] = useState(false)
+  const [checked2, setChecked2] = useState(true)
+
+  // Toggle state
+  const [toggleOn, setToggleOn] = useState(true)
+  const [toggleOff, setToggleOff] = useState(false)
+
+  // Radio state
+  const [radioV, setRadioV] = useState('option-a')
+  const [radioH, setRadioH] = useState('beta')
+
+  // Pagination state
+  const [page, setPage] = useState(5)
+
+  // DateTimePicker state
+  const [dtValue, setDtValue] = useState<Date>(new Date('2026-03-18T09:00'))
+
+  // DateRangePicker state
+  const [dateRange, setDateRange] = useState({
+    start: new Date('2026-03-11T00:00'),
+    end: new Date('2026-03-18T23:59'),
+  })
+
+  return (
+    <section id="primitives" className={styles.section}>
+      <h2 className={styles.sectionTitle}>Primitives</h2>
+
+      {/* 1. Alert */}
+      <DemoCard
+        id="alert"
+        title="Alert"
+        description="Contextual feedback messages in four variants, optionally dismissible."
+      >
+        <div className={styles.demoAreaColumn} style={{ width: '100%' }}>
+          <Alert variant="info" title="Info">This is an informational message.</Alert>
+          <Alert variant="success" title="Success">Operation completed successfully.</Alert>
+          <Alert variant="warning" title="Warning">This action may have side effects.</Alert>
+          {!alertDismissed && (
+            <Alert
+              variant="error"
+              title="Error"
+              dismissible
+              onDismiss={() => setAlertDismissed(true)}
+            >
+              Something went wrong. Dismiss to clear.
+            </Alert>
+          )}
+          {alertDismissed && (
+            <Button size="sm" variant="ghost" onClick={() => setAlertDismissed(false)}>
+              Reset dismissed alert
+            </Button>
+          )}
+        </div>
+      </DemoCard>
+
+      {/* 2. Avatar */}
+      <DemoCard
+        id="avatar"
+        title="Avatar"
+        description="Initials-based avatar with hash-derived colour, three sizes."
+      >
+        <Avatar name="Alice Johnson" size="sm" />
+        <Avatar name="Bob Smith" size="md" />
+        <Avatar name="Carol White" size="lg" />
+      </DemoCard>
+
+      {/* 3. Badge */}
+      <DemoCard
+        id="badge"
+        title="Badge"
+        description="Compact label with semantic colours and a dashed variant."
+      >
+        <Badge label="primary" color="primary" />
+        <Badge label="success" color="success" />
+        <Badge label="warning" color="warning" />
+        <Badge label="error" color="error" />
+        <Badge label="running" color="running" />
+        <Badge label="auto-hash" color="auto" />
+        <Badge label="dashed" color="primary" variant="dashed" />
+      </DemoCard>
+
+      {/* 4. Button */}
+      <DemoCard
+        id="button"
+        title="Button"
+        description="Primary, secondary, danger, and ghost variants across two sizes plus loading state."
+      >
+        <div className={styles.demoAreaColumn}>
+          <div className={styles.demoAreaRow}>
+            <Button variant="primary">Primary</Button>
+            <Button variant="secondary">Secondary</Button>
+            <Button variant="danger">Danger</Button>
+            <Button variant="ghost">Ghost</Button>
+          </div>
+          <div className={styles.demoAreaRow}>
+            <Button variant="primary" size="sm">Small</Button>
+            <Button variant="primary" size="md">Medium</Button>
+            <Button variant="primary" loading>Loading</Button>
+          </div>
+        </div>
+      </DemoCard>
+
+      {/* 5. Card */}
+      <DemoCard
+        id="card"
+        title="Card"
+        description="Surface container with optional left-border accent colour."
+      >
+        <Card><div style={{ padding: '8px 12px', fontSize: 13 }}>Plain card</div></Card>
+        <Card accent="amber"><div style={{ padding: '8px 12px', fontSize: 13 }}>Amber accent</div></Card>
+        <Card accent="success"><div style={{ padding: '8px 12px', fontSize: 13 }}>Success accent</div></Card>
+        <Card accent="error"><div style={{ padding: '8px 12px', fontSize: 13 }}>Error accent</div></Card>
+      </DemoCard>
+
+      {/* 6. Checkbox */}
+      <DemoCard
+        id="checkbox"
+        title="Checkbox"
+        description="Accessible checkbox with optional label, controlled and disabled states."
+      >
+        <Checkbox
+          label="Unchecked"
+          checked={checked1}
+          onChange={(e) => setChecked1(e.target.checked)}
+        />
+        <Checkbox
+          label="Checked"
+          checked={checked2}
+          onChange={(e) => setChecked2(e.target.checked)}
+        />
+        <Checkbox label="Disabled" disabled />
+        <Checkbox label="Disabled checked" disabled defaultChecked />
+      </DemoCard>
+
+      {/* 7. CodeBlock */}
+      <DemoCard
+        id="codeblock"
+        title="CodeBlock"
+        description="Syntax-highlighted code block with line numbers and copy button."
+      >
+        <div style={{ width: '100%' }}>
+          <CodeBlock
+            content={CODE_JSON}
+            language="json"
+            lineNumbers
+            copyable
+          />
+        </div>
+      </DemoCard>
+
+      {/* 8. Collapsible */}
+      <DemoCard
+        id="collapsible"
+        title="Collapsible"
+        description="Animated accordion-style disclosure, open and closed by default."
+      >
+        <div className={styles.demoAreaColumn} style={{ width: '100%' }}>
+          <Collapsible title="Collapsed by default">
+            <p style={{ margin: 0, fontSize: 13 }}>Hidden content revealed on expand.</p>
+          </Collapsible>
+          <Collapsible title="Open by default" defaultOpen>
+            <p style={{ margin: 0, fontSize: 13 }}>This content is visible from the start.</p>
+          </Collapsible>
+        </div>
+      </DemoCard>
+
+      {/* 9. DateTimePicker */}
+      <DemoCard
+        id="datetimepicker"
+        title="DateTimePicker"
+        description="Native datetime-local input wrapped with label and controlled value."
+      >
+        <DateTimePicker
+          label="Pick a date & time"
+          value={dtValue}
+          onChange={(d) => d && setDtValue(d)}
+        />
+      </DemoCard>
+
+      {/* 10. DateRangePicker */}
+      <DemoCard
+        id="daterangepicker"
+        title="DateRangePicker"
+        description="Preset pills combined with two DateTimePicker inputs for a start/end range."
+      >
+        <div style={{ width: '100%' }}>
+          <DateRangePicker value={dateRange} onChange={setDateRange} />
+        </div>
+      </DemoCard>
+
+      {/* 11. EmptyState */}
+      <DemoCard
+        id="emptystate"
+        title="EmptyState"
+        description="Zero-data placeholder with icon, title, description, and action slot."
+      >
+        <EmptyState
+          icon={<span style={{ fontSize: 28 }}>📭</span>}
+          title="No results found"
+          description="Try adjusting your filters or search query."
+          action={<Button size="sm" variant="secondary">Clear filters</Button>}
+        />
+      </DemoCard>
+
+      {/* 12. FilterPill */}
+      <DemoCard
+        id="filterpill"
+        title="FilterPill"
+        description="Toggle-style pill for filter UIs, with optional dot indicator and count."
+      >
+        <FilterPill label="Active" active />
+        <FilterPill label="Inactive" />
+        <FilterPill label="With dot" dot active />
+        <FilterPill label="Count" count={42} />
+      </DemoCard>
+
+      {/* 13. FormField */}
+      <DemoCard
+        id="formfield"
+        title="FormField"
+        description="Field wrapper providing a label, hint text, and inline error messaging."
+      >
+        <div className={styles.demoAreaColumn} style={{ minWidth: 240 }}>
+          <FormField label="Username" htmlFor="inv-username" hint="Letters and numbers only.">
+            <Input id="inv-username" placeholder="e.g. alice42" />
+          </FormField>
+          <FormField label="Email" htmlFor="inv-email" required error="Invalid email address.">
+            <Input id="inv-email" placeholder="you@example.com" />
+          </FormField>
+        </div>
+      </DemoCard>
+
+      {/* 14. InfoCallout */}
+      <DemoCard
+        id="infocallout"
+        title="InfoCallout"
+        description="Bordered callout block in amber, success, warning, and error flavours."
+      >
+        <div className={styles.demoAreaColumn} style={{ width: '100%' }}>
+          <InfoCallout variant="amber" title="Amber">Review before publishing.</InfoCallout>
+          <InfoCallout variant="success" title="Success">Deployment completed.</InfoCallout>
+          <InfoCallout variant="warning" title="Warning">Rate limit approaching.</InfoCallout>
+          <InfoCallout variant="error" title="Error">Build failed — check logs.</InfoCallout>
+        </div>
+      </DemoCard>
+
+      {/* 15. Input */}
+      <DemoCard
+        id="input"
+        title="Input"
+        description="Text input with optional leading icon and placeholder."
+      >
+        <Input placeholder="Plain input" />
+        <Input icon="🔍" placeholder="With icon" />
+      </DemoCard>
+
+      {/* 16. KeyboardHint */}
+      <DemoCard
+        id="keyboardhint"
+        title="KeyboardHint"
+        description="Styled keyboard shortcut badge."
+      >
+        <KeyboardHint keys="Ctrl+K" />
+        <KeyboardHint keys="⌘+P" />
+        <KeyboardHint keys="Esc" />
+      </DemoCard>
+
+      {/* 17. Label */}
+      <DemoCard
+        id="label"
+        title="Label"
+        description="Form label with optional required asterisk."
+      >
+        <Label>Plain label</Label>
+        <Label required>Required label</Label>
+      </DemoCard>
+
+      {/* 18. MonoText */}
+      <DemoCard
+        id="monotext"
+        title="MonoText"
+        description="Monospaced text in xs, sm, and md sizes."
+      >
+        <MonoText size="xs">xs: route-id-001</MonoText>
+        <MonoText size="sm">sm: route-id-001</MonoText>
+        <MonoText size="md">md: route-id-001</MonoText>
+      </DemoCard>
+
+      {/* 19. Pagination */}
+      <DemoCard
+        id="pagination"
+        title="Pagination"
+        description="Page navigation with ellipsis and sibling-window algorithm."
+      >
+        <Pagination
+          page={page}
+          totalPages={20}
+          onPageChange={setPage}
+        />
+      </DemoCard>
+
+      {/* 20. ProgressBar */}
+      <DemoCard
+        id="progressbar"
+        title="ProgressBar"
+        description="Determinate and indeterminate bars across variants and sizes."
+      >
+        <div className={styles.demoAreaColumn} style={{ width: '100%' }}>
+          <ProgressBar value={60} label="60% complete" />
+          <ProgressBar value={60} variant="success" label="Success variant" />
+          <ProgressBar value={60} variant="warning" label="Warning variant" />
+          <ProgressBar value={60} variant="error" label="Error variant" />
+          <ProgressBar value={60} variant="running" label="Running variant" />
+          <ProgressBar indeterminate label="Indeterminate" />
+          <ProgressBar value={60} size="sm" label="Small size" />
+        </div>
+      </DemoCard>
+
+      {/* 21. Radio */}
+      <DemoCard
+        id="radio"
+        title="Radio"
+        description="RadioGroup with vertical and horizontal orientations."
+      >
+        <RadioGroup name="inv-radio-v" value={radioV} onChange={setRadioV} orientation="vertical">
+          <RadioItem value="option-a" label="Option A" />
+          <RadioItem value="option-b" label="Option B" />
+          <RadioItem value="option-c" label="Option C (disabled)" disabled />
+        </RadioGroup>
+        <RadioGroup name="inv-radio-h" value={radioH} onChange={setRadioH} orientation="horizontal">
+          <RadioItem value="alpha" label="Alpha" />
+          <RadioItem value="beta" label="Beta" />
+          <RadioItem value="gamma" label="Gamma" />
+        </RadioGroup>
+      </DemoCard>
+
+      {/* 22. SectionHeader */}
+      <DemoCard
+        id="sectionheader"
+        title="SectionHeader"
+        description="Labelled horizontal divider with an optional right-side action slot."
+      >
+        <div className={styles.demoAreaColumn} style={{ width: '100%' }}>
+          <SectionHeader>Without action</SectionHeader>
+          <SectionHeader action={<Button size="sm" variant="ghost">Add item</Button>}>
+            With action
+          </SectionHeader>
+        </div>
+      </DemoCard>
+
+      {/* 23. Select */}
+      <DemoCard
+        id="select"
+        title="Select"
+        description="Styled native select with custom chevron."
+      >
+        <Select
+          options={[
+            { value: 'opt1', label: 'Option 1' },
+            { value: 'opt2', label: 'Option 2' },
+            { value: 'opt3', label: 'Option 3' },
+          ]}
+        />
+      </DemoCard>
+
+      {/* 24. Skeleton */}
+      <DemoCard
+        id="skeleton"
+        title="Skeleton"
+        description="Loading placeholder in text, circular, and rectangular variants."
+      >
+        <div className={styles.demoAreaColumn}>
+          <Skeleton variant="text" lines={3} width={200} />
+          <Skeleton variant="circular" />
+          <Skeleton variant="rectangular" width={200} height={60} />
+        </div>
+      </DemoCard>
+
+      {/* 25. Sparkline */}
+      <DemoCard
+        id="sparkline"
+        title="Sparkline"
+        description="Lightweight SVG line chart for inline trend visualisation."
+      >
+        <Sparkline data={SPARKLINE_DATA} width={120} height={30} />
+        <Sparkline data={SPARKLINE_DATA} color="var(--success)" width={120} height={30} />
+        <Sparkline data={SPARKLINE_DATA} color="var(--error)" width={120} height={30} />
+      </DemoCard>
+
+      {/* 26. Spinner */}
+      <DemoCard
+        id="spinner"
+        title="Spinner"
+        description="Animated loading indicator in sm, md, and lg sizes."
+      >
+        <Spinner size="sm" />
+        <Spinner size="md" />
+        <Spinner size="lg" />
+      </DemoCard>
+
+      {/* 27. StatCard */}
+      <DemoCard
+        id="statcard"
+        title="StatCard"
+        description="Metric tile with label, value, trend indicator, and inline sparkline."
+      >
+        <StatCard
+          label="Throughput"
+          value="1,433"
+          detail="msg/s"
+          trend="up"
+          trendValue="+12%"
+          accent="amber"
+          sparkline={SPARKLINE_DATA}
+        />
+        <StatCard
+          label="Error rate"
+          value="0.4%"
+          trend="down"
+          trendValue="-0.1pp"
+          accent="error"
+        />
+        <StatCard
+          label="Agents"
+          value="6"
+          detail="all healthy"
+          trend="neutral"
+          trendValue="±0"
+          accent="success"
+        />
+      </DemoCard>
+
+      {/* 28. StatusDot */}
+      <DemoCard
+        id="statusdot"
+        title="StatusDot"
+        description="Small coloured dot for all status variants, with optional pulse animation."
+      >
+        {(['live', 'stale', 'dead', 'success', 'warning', 'error', 'running'] as const).map(
+          (v) => (
+            <div key={v} className={styles.demoGroupRow}>
+              <StatusDot variant={v} />
+              <span style={{ fontSize: 12, color: 'var(--text-secondary)' }}>{v}</span>
+            </div>
+          ),
+        )}
+        <div className={styles.demoGroupRow}>
+          <StatusDot variant="live" pulse />
+          <span style={{ fontSize: 12, color: 'var(--text-secondary)' }}>live + pulse</span>
+        </div>
+      </DemoCard>
+
+      {/* 29. Tag */}
+      <DemoCard
+        id="tag"
+        title="Tag"
+        description="Keyword label with semantic or auto hash colour, and removable variant."
+      >
+        <Tag label="primary" color="primary" />
+        <Tag label="success" color="success" />
+        <Tag label="warning" color="warning" />
+        <Tag label="error" color="error" />
+        <Tag label="auto-hash" color="auto" />
+        <Tag label="removable" color="primary" onRemove={() => undefined} />
+      </DemoCard>
+
+      {/* 30. Textarea */}
+      <DemoCard
+        id="textarea"
+        title="Textarea"
+        description="Multi-line text input with vertical resize by default."
+      >
+        <Textarea placeholder="Enter a description…" style={{ width: 280 }} />
+      </DemoCard>
+
+      {/* 31. Toggle */}
+      <DemoCard
+        id="toggle"
+        title="Toggle"
+        description="On/off switch with optional label."
+      >
+        <Toggle
+          label="Enabled"
+          checked={toggleOn}
+          onChange={(e) => setToggleOn(e.target.checked)}
+        />
+        <Toggle
+          label="Disabled off"
+          checked={toggleOff}
+          onChange={(e) => setToggleOff(e.target.checked)}
+        />
+        <Toggle label="Locked on" checked disabled />
+        <Toggle label="Locked off" disabled />
+      </DemoCard>
+
+      {/* 32. Tooltip */}
+      <DemoCard
+        id="tooltip"
+        title="Tooltip"
+        description="CSS-only hover tooltip in all four positions."
+      >
+        <Tooltip content="Top tooltip" position="top">
+          <Button size="sm" variant="secondary">Top</Button>
+        </Tooltip>
+        <Tooltip content="Bottom tooltip" position="bottom">
+          <Button size="sm" variant="secondary">Bottom</Button>
+        </Tooltip>
+        <Tooltip content="Left tooltip" position="left">
+          <Button size="sm" variant="secondary">Left</Button>
+        </Tooltip>
+        <Tooltip content="Right tooltip" position="right">
+          <Button size="sm" variant="secondary">Right</Button>
+        </Tooltip>
+      </DemoCard>
+    </section>
+  )
+}