Component Story Format (CSF)
Watch a video tutorial on the Storybook channel
💡 If you are writing stories in the older
storiesOf() syntax, you can find documentation in an advanced README.
CSF is supported in all frameworks except React Native, where you should use the storiesOf API instead.
component field is required and used by addons for automatic prop table generation and display of other component metadata. The
title field is optional and should be unique (i.e., not re-used across files).
For more examples, see writing stories.
With CSF, every named export in the file represents a story object by default.
The exported identifiers will be converted to "start case" using Lodash's startCase function. For example:
|some_custom_NAME||Some Custom NAME|
|someName1234||Some Name 1 2 3 4|
We recommend that all export names to start with a capital letter.
Starting in SB 6.0, stories accept named inputs called Args. Args are dynamic data that are provided (and possibly updated by) Storybook and its addons.
Consider Storybook’s "Button" example of a text button that logs its click events:
Now consider the same example, re-written with args:
Or even more simply:
Not only are these versions shorter and more accessible to write than their no-args counterparts, but they are also more portable since the code doesn't depend on the actions addon specifically.
play functions are small snippets of code executed when the story renders in the UI. They are convenient helper methods to help you test use cases that otherwise weren't possible or required user intervention.
A good use case for the
play function is a form component. With previous Storybook versions, you'd write your set of stories and had to interact with the component to validate it. With Storybook's play functions, you could write the following story:
When the story renders in the UI, Storybook executes each step defined in the
play function and runs the assertions without the need for user interaction.
Render functions are helpful methods to give you additional control over how the story renders. For example, if you were writing a story as an object and you wanted to specify how your component should render, you could write the following:
When Storybook loads this story, it will detect the existence of a
render function and adjust the component rendering accordingly based on what's defined.
Storybook handles named exports and the
name option slightly differently. When should you use one vs. the other?
Storybook will always use the named export to determine the story ID and URL.
If you specify the
name option, it will be used as the story display name in the UI. Otherwise, it defaults to the named export, processed through Storybook's
When you want to change the name of your story, rename the CSF export. It will change the name of the story and also change the story's ID and URL.
It would be best if you used the
name configuration element in the following cases:
- You want the name to show up in the Storybook UI in a way that's not possible with a named export, e.g., reserved keywords like "default", special characters like emoji, spacing/capitalization other than what's provided by
- You want to preserve the Story ID independently from changing how it's displayed. Having stable Story IDs is helpful for integration with third-party tools.
In some cases, you may want to export a mixture of stories and non-stories (e.g., mocked data).
You can use the optional configuration fields
excludeStories in the default export to make this possible. You can define them as an array of strings or regular expressions.
Consider the following story file:
When this file renders in Storybook, it treats
SimpleStory as stories and ignores the
data named exports.
For this particular example, you could achieve the same result in different ways, depending on what's convenient:
includeStories: ['SimpleStory', 'ComplexStory']
excludeStories: ['simpleData', 'complexData']
The first option is the recommended solution if you follow the best practice of starting story exports with an uppercase letter (i.e., use UpperCamelCase).