@storybook/addon-essentials

Storybook Essentials

Storybook Essentials is a curated collection of addons to bring out the best of Storybook.

Each addon is documented and maintained by the core team and will be upgraded alongside Storybook as the platform evolves. We will also do our best to maintain framework support for all of the officially supported frameworks.

Contents

Storybook essentials includes the following addons. Addons can be disabled and re-configured as described below:

• Actions
• Backgrounds
• Controls
• Docs
• Viewport
• Toolbars
• Measure
• Outline

Installation

You can add Essentials to your project with:

npm install --save-dev @storybook/addon-essentials

And then add the following line to your .storybook/main.js:

export default {
  addons: ['@storybook/addon-essentials'],
};

Configuration

Essentials is "zero config." That means that comes with a recommended configuration out of the box.

If you want to reconfigure an addon, simply install that addon per that addon's installation instructions and configure it as normal. Essentials scans your project's main.js on startup and if detects one of its addons is already configured in the addons field, it will skip that addon's configuration entirely.

Disabling addons

You can disable any of Essential's addons using the following configuration scheme in .storybook/main.js:

export default {
  addons: [{
    name: '@storybook/addon-essentials',
    options: {
      <addon-key>: false,
    }
  }]
};

Valid addon keys include: actions, backgrounds, controls, docs, viewport, toolbars.

Similar packages

Other packages similar to @storybook/addon-essentials

@storybook/addon-knobs

This package allows you to add knobs to your stories in Storybook. Similar to Controls, knobs let you edit props dynamically using a UI. However, @storybook/addon-essentials' Controls are the successor to Knobs and are recommended for new development.

@storybook/addon-actions

This package is included in @storybook/addon-essentials and can be used standalone. It allows you to log interactions and events that happen in the UI components being developed.

@storybook/addon-viewport

Also part of @storybook/addon-essentials, this standalone addon allows you to view your components in different sizes and layouts in Storybook, simulating how they would look on different devices.

@storybook/addon-backgrounds

This is another addon that is part of the essentials package. It lets you define a set of backgrounds that can be applied to the Storybook canvas, allowing you to test components in different environments.

@storybook/addon-toolbars

This addon is included in the essentials package and provides the ability to create custom toolbars in Storybook. It's useful for creating global context changes for your components.