@storybook/addon-backgrounds

Storybook Addon Backgrounds

Storybook Addon Backgrounds can be used to change background colors inside the preview in Storybook.

Framework Support

Installation

Backgrounds is part of essentials and so is installed in all new Storybooks by default. If you need to add it to your Storybook, you can run:

npm i -D @storybook/addon-backgrounds

Configuration

Then, add following content to .storybook/main.js:

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

Usage

The usage is documented in the documentation.

Similar packages

Other packages similar to @storybook/addon-backgrounds

@storybook/addon-knobs

The @storybook/addon-knobs package allows you to edit React props dynamically using the Storybook UI. It is similar to @storybook/addon-backgrounds in that it enhances the Storybook experience by allowing for real-time changes to the component's environment, but it focuses on props rather than backgrounds.

@storybook/addon-actions

The @storybook/addon-actions package can be used to display data received by event handlers in Storybook. It is similar to @storybook/addon-backgrounds in that it helps in visualizing and debugging components, but it focuses on capturing and displaying actions rather than changing backgrounds.

@storybook/addon-viewport

The @storybook/addon-viewport package allows you to adjust the viewport size and layout for responsive design testing within Storybook. While @storybook/addon-backgrounds changes the background behind components, @storybook/addon-viewport changes the size of the frame that the component is rendered within.