Essentials

Storybook essentials is a set of tools that help you build, test, and document your components within Storybook. It includes the following:

• Actions
• Backgrounds
• Controls
• Highlight
• Interactions
• Measure & outline
• Toolbars & globals
• Viewport

Configuration

Essentials is "zero-config”. It comes with a recommended configuration out of the box.

Many of the features above can be configured via parameters. See each feature's documentation (linked above) for more details.

Disabling features

If you need to disable any of the essential features, you can do it by changing your .storybook/main.js|ts file.

For example, if you wanted to disable the backgrounds feature, you would apply the following change to your Storybook configuration:

// Replace your-framework with the framework you are using (e.g., react-webpack5, vue3-vite)
import type { StorybookConfig } from '@storybook/your-framework';
 
const config: StorybookConfig = {
  framework: '@storybook/your-framework',
  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
  features: {
    backgrounds: false, // 👈 disable the backgrounds feature
  },
};
 
export default config;