Create a Storybook Story

Create a story for a component for a specific rendered state to show its look and behavior. 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, a story file is created in the format {component-name}.stories.tsx. Update the story file to customize it for the specific rendered state for displaying the component.

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 wrappers when needed, such as API, context, i18n, Redux, and so on.