Writing Your First Story

Story anatomy

A story is a named export that returns a component with specific props. The default export contains metadata about the component. Together, they make up a Story File.

Basic story example

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

import { Button } from './Button';

export default {
  component: Button,
  title: 'Components/Button',
};

export const Primary = () => <Button variant="primary">Click me</Button>;
export const Secondary = () => <Button variant="secondary">Cancel</Button>;
export const Disabled = () => <Button disabled>Disabled</Button>;

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 functions from your story file to create different scenarios. Each export becomes a separate story in Storybook.