New
You're viewing older docs for version 8.0. 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
navSizeNumber (pixels)The size of the sidebar that shows a list of stories300
bottomPanelHeightNumber (pixels)The size of the addon panel when in the bottom position200
rightPanelWidthNumber (pixels)The size of the addon panel when in the right position200
panelPositionStringWhere to show the addon panel'bottom' or 'right'
enableShortcutsBooleanEnable/disable shortcutstrue
showToolbarBooleanShow/hide tool bartrue
themeObjectStorybook Theme, see next sectionundefined
selectedPanelStringId to select an addon panel'storybook/actions/panel'
initialActiveStringSelect the default active tab on Mobile'sidebar' 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="...">{item.name}</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
enableShortcutsshortcutsfalse
--- (fullscreen)fulltrue, false
--- (show sidebar)navtrue, false
--- (show panel)panelfalse, 'right', 'bottom'
selectedPaneladdonPanelAny panel ID
showTabstabstrue
---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!
Storybook
Join the community
6,615 developers and counting
WhyWhy StorybookComponent-driven UI
DocsGuidesTutorialsChangelogTelemetry
CommunityAddonsGet involvedBlog
ShowcaseExploreProjectsComponent glossary
Open source software
Storybook

Maintained by
Chromatic
Special thanks to Netlify and CircleCI