Storybook

10.3.5 · active · verified Tue Apr 21

Storybook is a widely adopted open-source tool for developing, documenting, and testing UI components in isolation. It enables developers to create "stories" that represent different states of a component, facilitating visual testing, collaboration, and automated testing. The current stable version is 10.3.5, with major releases roughly once a year and minor releases every eight weeks, preceded by alpha/beta/rc pre-releases. Key differentiators include its extensive addon ecosystem, cross-framework support (React, Vue, Angular, etc.), and emphasis on Component Story Format (CSF) for portable story definitions. It's an essential tool for building and maintaining robust design systems, providing a dedicated environment to explore and showcase component variations.

Common errors

Warnings

Install

Imports

Quickstart

This quickstart demonstrates how to define a React component and its stories using TypeScript and Component Story Format (CSF) 3. It showcases basic props, argTypes for control customization, and multiple story variants.

import React from 'react';
import type { Meta, StoryObj } from '@storybook/react';

interface ButtonProps {
  /**
   * Is this the principal call to action on the page?
   */
  primary?: boolean;
  /**
   * What background color to use
   */
  backgroundColor?: string;
  /**
   * How large should the button be?
   */
  size?: 'small' | 'medium' | 'large';
  /**
   * Button contents
   */
  label: string;
  /**
   * Optional click handler
   */
  onClick?: () => void;
}

const Button: React.FC<ButtonProps> = ({ primary = false, size = 'medium', backgroundColor, label, ...props }) => {
  const mode = primary ? 'storybook-button--primary' : 'storybook-button--secondary';
  return (
    <button
      type="button"
      className={['storybook-button', `storybook-button--${size}`, mode].join(' ')}
      style={{ backgroundColor }}
      {...props}
    >
      {label}
    </button>
  );
};

// More on default exports: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
const meta: Meta<typeof Button> = {
  title: 'Example/Button',
  component: Button,
  tags: ['autodocs'],
  argTypes: {
    backgroundColor: { control: 'color' },
  },
  args: {
    onClick: () => console.log('Button clicked'), // Example action
  },
};

export default meta;

type Story = StoryObj<typeof meta>;

export const Primary: Story = {
  args: {
    primary: true,
    label: 'Button',
  },
};

export const Secondary: Story = {
  args: {
    label: 'Button',
  },
};

export const Large: Story = {
  args: {
    size: 'large',
    label: 'Button',
  },
};

export const Small: Story = {
  args: {
    size: 'small',
    label: 'Button',
  },
};

view raw JSON →