Storybook Has a Free API — UI Component Workshop for React, Vue, and Svelte

Storybook is a workshop for building, testing, and documenting UI components in isolation. See every component state without running your full app.

Why Storybook?

• Isolation — develop components without the full app
• Visual testing — see every state: loading, error, empty, full
• Documentation — auto-generated docs from your components
• Addons — accessibility, responsive, dark mode, interactions

Quick Start

npx storybook@latest init
npm run storybook

Writing Stories

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

const meta: Meta<typeof Button> = {
  component: Button,
  tags: ['autodocs'],
};
export default meta;

type Story = StoryObj<typeof Button>;

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

export const Secondary: Story = {
  args: { variant: 'secondary', children: 'Cancel' },
};

export const Loading: Story = {
  args: { children: 'Saving...', loading: true },
};

export const Disabled: Story = {
  args: { children: 'Submit', disabled: true },
};

Interaction Testing

import { within, userEvent, expect } from '@storybook/test';

export const FilledForm: Story = {
  play: async ({ canvasElement }) => {
    const canvas = within(canvasElement);
    await userEvent.type(canvas.getByLabelText('Email'), '[e-mail]');
    await userEvent.click(canvas.getByRole('button'));
    await expect(canvas.getByText('Success')).toBeInTheDocument();
  },
};

Addons

npx storybook@latest add @storybook/addon-a11y

---

Building component libraries? Check out my Apify actors, or email [e-mail] for custom UI development.

Storybook, Ladle, or Histoire — which component tool do you use? Share below!