Reference
Storybook

Storybook

Storybook is the living component documentation for Ledger UI. Every component and template has stories with interactive controls.

Run Locally

pnpm --filter @gtcx/storybook dev    # Dev server at localhost:6006
pnpm --filter @gtcx/storybook build  # Static build

What's Included

  • 70 stories across all component groups
  • 13 MetronicLayout stories — one per variant plus variations
  • Template stories — Dashboard, List, Detail, Auth, Error with mock data
  • Accessibility addon — automated axe checks on every story
  • Interactive controls — adjust props in real-time

Story Categories

CategoryStories
LayoutMetronicLayout (13), Header, Separator, ScrollArea, ResponsiveGrid, SplitPane
NavigationSideNav, Toolbar, Breadcrumbs, MegaMenu, DropdownMenu, ContextMenu, Menubar, Command, Tabs, NavigationMenu
FormsButton, Input, Select, Checkbox, Switch, Toggle, ToggleGroup, RadioGroup, Textarea, Form, Calendar, FileUpload, Label
DataAdvancedTable, Card, Badge, Avatar, Skeleton, DataVisualization
FeedbackAlert, Dialog, AlertDialog, Sheet, Tooltip, Popover, HoverCard, Accordion, Collapsible, Progress
TemplatesDashboard, List, Detail, Wizard, Settings, Error, Auth, Profile, Billing, Security, Members, Notifications, Activity, Invite, Projects
TokensColor palette, spacing, typography reference

Accessibility Testing

The Storybook includes @storybook/addon-a11y with axe-core integration:

  • A11y panel visible in the addon bar for every story
  • Automated checks for contrast, ARIA, keyboard navigation
  • Run automated a11y test suite: pnpm --filter @gtcx/storybook test:a11y
  • Validate component-story coverage: pnpm storybook:coverage

Visual Regression (Chromatic)

Chromatic is configured for visual snapshot testing:

pnpm --filter @gtcx/storybook chromatic

Requires CHROMATIC_PROJECT_TOKEN environment variable. In CI, Chromatic runs automatically after the main build passes.

Activation status and verification:

  • main pushes fail if CHROMATIC_PROJECT_TOKEN is missing.
  • PR runs publish snapshots when the token is configured.
  • Use docs/quality/chromatic-activation-runbook.md in the repo for the step-by-step setup and baseline checklist.
AccessibilityADR Index