Back to integrations
Add your integration
  • ⭐️ Popular
  • 🧩 Essentials
  • 🛠 Code
  • ⚡️ Data & state
  • ✅ Test
  • 💅 Style
  • 🎨 Design
  • ⚙️ Appearance
  • 🗄 Organize
How to install addons Create an addon
Inspect layouts by visualizing the box model
npm install @junk-temporary-prototypes/addon-measure
Last updated 12 months ago
Downloads per week
Readme View on GitHub

Storybook Addon Measure

Storybook addon for inspecting layouts and visualizing the box model.

  1. Press the m key to enable the addon:

  2. Hover over a DOM node

  3. Storybook will display the dimensions of the selected element—margin, padding, border, width and height—in pixels.


This addon requires Storybook 6.3 or later. Measure 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-measure

Add "@storybook/addon-measure" to the addons array in your .storybook/main.js:

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


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

Maintained by
Special thanks to Netlify and CircleCI