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 optional (but encouraged!), and is used by addons for automatic prop table generation and display of other component metadata.
title 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 function 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|
It's recommended to start export names 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 easier to write than their no-args counterparts, but they are also more portable since the code doesn't depend on the actions addon specifically.
Storybook handles named exports and
story.name slightly differently. When should you use one vs. the other?
The named export is always used to determine the story ID / URL.
If you specify
story.name, it will be used as the story display name in the UI.
If you don't specify
story.name, the named export will be used to generate the display name. Storybook passes the named export through a
storyNameFromExport function, which is implemented with
When you want to change the name of your story, just rename the CSF export. This will change the name of the story and also change the story's ID and URL.
You should use the
story.name option in the following cases:
In some cases, you may want to export a mixture of story and non-stories. For example, it can be useful to export data that's used in your stories.
To make this possible, you can use optional
excludeStories configuration fields in the default export, which can be set to either an array of strings, or a regular expression.
Consider the following story file:
When Storybook loads this file, it will see all the exports, but it will ignore the data exports and only treat
ComplexStory as stories.
For this specific example the equivalent result can be achieved in a few ways depending on what's convenient:
includeStories: ['SimpleStory', 'ComplexStory']
excludeStories: ['simpleData', 'complexData']
If you follow the best practice of starting story exports with an uppercase letter (i.e. use UpperCamelCase), the first option is the recommended solution.