Storybook

Storybook

Explore all components interactively in our Storybook environment.

🚀 Live Storybook

Access our hosted Storybook:

  • Live Storybook (opens in a new tab) - Interactive component playground
  • No setup required - Just click and explore
  • Always up-to-date - Automatically deployed from main branch

Local Development

To start Storybook locally for development:

npm run storybook

Storybook will run on http://localhost:6007 (opens in a new tab)

What is Storybook?

Storybook is a tool for building UI components and pages in isolation. It helps with:

  • Component development - Build components in isolation
  • Documentation - Automatically generated documentation
  • Testing - Test components in different states
  • Design system - Maintain consistent design

Components in Storybook

All our components have stories in Storybook:

  • Button - All variants and sizes
  • Input - Different types and states
  • Dialog - Modals and overlays
  • Card - Layout components
  • Table - Data tables
  • Form - Form components
  • Navigation - Menu and navigation
  • Feedback - Alerts, toasts, progress

Interactive Examples

In the documentation you can see live examples of components directly integrated from Storybook. These examples update automatically when you change the components.

Tips

  • Copy code directly from Storybook examples
  • Test different props in Storybook controls
  • See all variants in one place
  • Debug components in isolation
FAQSimple