Development Tooling

Storybook

Isolated component development and documentation. Storybook helps you build UI components in isolation, making them more robust and reusable.

Why Storybook?

It streamlines our development workflow by providing a clean environment to test variants, edge cases, and accessibility without full-app overhead.

Isolated Development

Build components without worrying about application logic, data flow, or state. Perfect for building atomic UI.

Visual Testing

Easily view and verify different component states, from loading and errors to various sizes and themes.

Available Commands

Storybook comes with a set of scripts to help you develop, document, and test your components.

Scripts

# Run storybook in development mode

npm run storybook

# Build static storybook for deployment

npm run build-storybook

Creating a new Story

Stories are defined in files ending in .stories.tsx. Each story exports a set of variants for a specific component.

button.stories.tsx

import type { Meta, StoryObj } from '@storybook/react';
import { Button } from './button';

const meta: Meta<typeof Button> = {
  title: 'UI/Button',
  component: Button,
  tags: ['autodocs'],
};

export default meta;
type Story = StoryObj<typeof meta>;

export const Primary: Story = {
  args: {
    variant: 'primary',
    children: 'Click Me',
  },
};

Theming

Next Up