Docs
Storybook Docs

Features and behavior

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

.storybook/manager.js
import { addons } from '@storybook/manager-api';
 
addons.setConfig({
  navSize: 300,
  bottomPanelHeight: 300,
  rightPanelWidth: 300,
  panelPosition: 'bottom',
  enableShortcuts: true,
  showToolbar: true,
  theme: undefined,
  selectedPanel: undefined,
  initialActive: 'sidebar',
  sidebar: {
    showRoots: false,
    collapsedRoots: ['other'],
  },
  toolbar: {
    title: { hidden: false },
    zoom: { hidden: false },
    eject: { hidden: false },
    copy: { hidden: false },
    fullscreen: { hidden: false },
  },
});

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, api) => <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