Outline all elements with CSS to help with layout placement and alignment

Usage no npm install needed!

<script type="module">
  import storybookAddonOutline from '';


⚠️ MOVED: This addon was moved to the Storybook monorepo

Storybook Addon Outline (moved)

Storybook Addon Outline can be used for visually debugging CSS layout and alignment inside the preview in Storybook. Based on Pesticide, it draws outlines around every single element in the preview pane.

React Storybook Screenshot

Getting Started

Requires Storybook 6.1 or later. Install the latest with npx sb upgrade --prerelease

First, install the addon

npm i -D storybook-addon-outline

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

module.exports = {
  addons: ['storybook-addon-outline'],


Click on the outline button in the toolbar to toggle the outlines.