Framework:

Features and behavior

To control the layout of Storybook’s UI you can use the setConfig addons API 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
isToolshownStringShow/hide tool bartrue
themeObjectStorybook Theme, see next sectionundefined
selectedPanelStringId to select an addon panelmy-panel
initialActiveStringSelect the default active tab on Mobilesidebar or canvas or addons
sidebarObjectSidebar options, see below{ showRoots: 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>