Naming components and hierarchy
The title of the component you export in the
default export controls the name shown in the sidebar.
It is also possible to group related components in an expandable interface in order to help with Storybook organization. To do so, use the
/ as a separator:
By default the top-level grouping will be displayed as a “root” in the UI (the all-caps, non expandable grouping in the screenshot above). If you prefer, you can configure Storybook to not show roots.
We recommend naming components according to the file hierarchy.
Single story hoisting
Stories which have no siblings (i.e. the component has only one story) and which display name exactly matches the component name (last part of
title) will be hoisted up to replace their parent component in the sidebar. This means you can have stories files like this:
This will then be visually presented in the sidebar like this:
Because story exports are automatically "start cased" (
"My Story"), your component name should match that. Alternatively you can override the story name using
myStory.storyName = '...' to match the component name.
By default, stories are sorted in the order in which they were imported. This can be overridden by adding
storySort to the
options parameters in your
The most powerful method of sorting is to provide a function to
storySort. Any custom sorting can be achieved with this method.
storySort can also accept a configuration object.
|method||String||Tells Storybook in which order the stories are displayed||No||Storybook configuration|
|order||Array||The stories to be shown, ordered by supplied name||No||Empty Array |
|includeName||Boolean||Include story name in sort calculation||No|
|locales||String||The locale required to be displayed||No||System locale|
To sort your stories alphabetically, set
'alphabetical' and optionally set the
locales string. To sort your stories using a custom list, use the
order array; stories that don't match an item in the
order list will appear after the items in the list.
order array can accept a nested array in order to sort 2nd-level story kinds. For example:
Which would result in this story ordering:
- All other stories
If you want certain categories to sort to the end of the list, you can insert a
* into your
order array to indicate where "all other stories" should go:
In this example, the
WIP category would be displayed at the end of the list.
Note that the
order option is independent of the
method option; stories are sorted first by the
order array and then by either the
method: 'alphabetical' or the default
configure() import order.