Writing Your First Story

Story anatomy

A story is a named export that describes one state of a component. In Component Story Format 3 (CSF3), each story is an object with args, and the default export holds the component metadata. Together they make up a story file.

Basic story example

Here's a simple Button component story showing the default state.

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

const meta = {
  component: Button,
  title: 'Components/Button',
} satisfies Meta<typeof Button>;
export default meta;

type Story = StoryObj<typeof meta>;

export const Primary: Story = { args: { variant: 'primary', children: 'Click me' } };
export const Secondary: Story = { args: { variant: 'secondary', children: 'Cancel' } };
export const Disabled: Story = { args: { disabled: true, children: 'Disabled' } };

Story file naming

Story files should be named ComponentName.stories.tsx and placed next to or near the component file. This keeps stories close to their components.

Exporting multiple stories

Export multiple named stories from your file to create different scenarios. Each export becomes a separate story in Storybook.