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.

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.