Back to integrations
Add your integration
  • ⭐️ Popular
  • 🧩 Essentials
  • 🛠 Code
  • ⚡️ Data & state
  • ✅ Test
  • 💅 Style
  • 🎨 Design
  • ⚙️ Appearance
  • 🗄 Organize
How to install addons Create an addon
Outline all elements with CSS to help with layout placement and alignment
npm install @junk-temporary-prototypes/addon-outline
Last updated about 1 year ago
Downloads per week
Readme View on GitHub

Storybook Addon Outline

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


Requires Storybook 6.1 or later. Outline 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-outline

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

export default {
  addons: ['@storybook/addon-outline'],

You can now click on the outline button or press the o key in the toolbar to toggle the outlines.

Join the community
6,616 developers and counting
WhyWhy StorybookComponent-driven UI
CommunityAddonsGet involvedBlog
ShowcaseExploreProjectsComponent glossary
Open source software

Maintained by
Special thanks to Netlify and CircleCI