Create a Storybook Story

Create a story for a component for a specific rendered state to show its look and behavior. A component can have multiple stories, one per state—default, loading, and error. Add a story in the Storybook UI or use a code file.

To add a story in the Storybook UI, click + in the sidebar and search for your component. For more details, see Working with Stories and How to write stories in the Storybook documentation.

After you add a story in the Storybook UI, a story file is created. The story file format is *.stories.tsx (for example, index.stories.tsx, or named after a subcomponent such as signup.stories.tsx). Update the story file to customize it for the specific rendered state for displaying the component. If you add a story using a code file, add it in the stories/ subfolder next to the component file.

This code example defines a Storybook story for a React component named MyComponent. It renders MyComponent in the Default state and exports a story with the primary variant.

1import type { Meta, StoryObj } from '@storybook/react-vite';
2import { MyComponent } from './MyComponent';
3
4const meta: Meta<typeof MyComponent> = {
5  title: 'Components/MyComponent',
6  component: MyComponent,
7  tags: ['autodocs'],
8};
9
10export default meta;
11type Story = StoryObj<typeof meta>;
12
13export const Default: Story = {
14  args: {
15    variant: 'primary',
16  },
17};

Best Practices for Writing a Story

When you write a story, keep in mind these best practices.

Use one file per component.
To test components with different screen sizes, use Storybook’s built-in viewport toolbar instead of creating separate stories.
Use args & argTypes to make props interactive.
Include play functions for interaction coverage.
Add component description in the docs.
Fix a11y issues directly in component logic.
Avoid mocking real implementations incorrectly.
Use mock data at the router boundary with story parameters. For components that require global context, wrap them in the provider stack via a decorator.

Create a Storybook Story

Best Practices for Writing a Story

See Also