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

Live Storybook: https://jarllyng.github.io/nostromo-ui/storybook-static/ (opens in a new tab)

For local development, run:

cd packages/ui-core
pnpm storybook

Storybook will run on http://localhost:6006 (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 core 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
  • DataTable - Advanced tables with filtering
  • Calendar - Date picker with multiple modes
  • Charts - Data visualization
  • Form - Form components
  • Navigation - Menu and navigation
  • Feedback - Alerts, toasts, progress

Note: Marketing components (Hero, Features, Testimonials, etc.) are documented on the documentation site but don't have Storybook stories yet.

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