Automatic visual tests in Storybook, plus 2.2x faster build times for React+TSVisual test with Chromatic

You're viewing older docs for version 6.5. View latest docs

Features and behavior

To control the layout of Storybook’s UI you can use addons.setConfig in your .storybook/manager.js:

The following table details how to use the API values:

NameTypeDescriptionExample Value
isFullscreenBooleanShow story component as full screenfalse
showNavBooleanDisplay panel that shows a list of storiestrue
showPanelBooleanDisplay panel that shows addon configurationstrue
panelPositionString/ObjectWhere to show the addon panelbottom or right
enableShortcutsBooleanEnable/disable shortcutstrue
showToolbarBooleanShow/hide tool bartrue
themeObjectStorybook Theme, see next sectionundefined
selectedPanelStringId to select an addon panelstorybook/actions/panel
initialActiveStringSelect the default active tab on Mobilesidebar or canvas or addons
sidebarObjectSidebar options, see below{ showRoots: false }
toolbarObjectModify the tools in the toolbar using the addon id{ fullscreen: { hidden: false } } }

The following options are configurable under the sidebar namespace:

NameTypeDescriptionExample Value
showRootsBooleanDisplay the top-level nodes as a "root" in the sidebarfalse
collapsedRootsArraySet of root node IDs to visually collapse by default['misc', 'other']
renderLabelFunctionCreate a custom label for tree nodes; must return a ReactNode(item) => <abbr title="...">{}</abbr>

The following options are configurable under the toolbar namespace:

NameTypeDescriptionExample Value
idStringToggle visibility for toolbar item{ hidden: false }

Configuring through URL parameters

You can use URL parameters to configure some of the available features:

Config optionQuery paramSupported values
showPanelpanelfalse, right, bottom
selectedPaneladdonPanelAny panel ID
---instrumentfalse, true

Was this page helpful?

Markdown accepted ([link text](url), _italic_, **bold**, etc). Your anonymous feedback will be posted publicly on GitHub.

✍️ Edit on GitHub – PRs welcome!
Join the community
6,304 developers and counting
WhyWhy StorybookComponent-driven UI
Open source software

Maintained by
Special thanks to Netlify and CircleCI