You're viewing older docs for version 7.6. 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,615 developers and counting
WhyWhy StorybookComponent-driven UI
CommunityAddonsGet involvedBlog
ShowcaseExploreProjectsComponent glossary
Open source software

Maintained by
Special thanks to Netlify and CircleCI