@storybook/addon-measure

What is @storybook/addon-measure?

The @storybook/addon-measure npm package is a Storybook addon used for measuring and inspecting elements in a Storybook UI. This tool is particularly useful for developers and designers to ensure precise visual consistency directly within the Storybook environment. It allows users to measure dimensions, spacing, and alignment of components during the development process.

What are @storybook/addon-measure's main functionalities?

Element Measurement

This feature allows users to measure the dimensions and spacing of components. By adding the withMeasure decorator, users can toggle measurement tools in the Storybook UI to inspect the component presented in the story.

import { withMeasure } from '@storybook/addon-measure';

export default {
  title: 'Your Component',
  decorators: [withMeasure]
};

export const YourStory = () => <YourComponent />;

Alignment Inspection

This feature enables users to check the alignment of elements within components. The decorator adds visual guides that help in aligning text, icons, or other elements accurately within the component.

import { withMeasure } from '@storybook/addon-measure';

export default {
  title: 'Another Component',
  decorators: [withMeasure]
};

export const AnotherStory = () => <AnotherComponent />;

Other packages similar to @storybook/addon-measure

@storybook/addon-outline

Similar to @storybook/addon-measure, @storybook/addon-outline provides visual tools to enhance UI development in Storybook. While @storybook/addon-measure focuses on measuring and spacing, @storybook/addon-outline helps by drawing outlines around components, which is useful for visual debugging of layout and container boundaries.

storybook-addon-designs

This addon is used to embed Figma or Sketch designs next to your Storybook stories, facilitating a side-by-side comparison between design files and implemented components. Unlike @storybook/addon-measure, which is more focused on in-story measurements, storybook-addon-designs bridges the gap between design and development by directly integrating design visuals.

README

The README file is missing

Changelog

9.0.8

• Addon Docs: Fix SyntaxHighlighter "Copy" button by avoiding potentially mocked clipboard - #31682, thanks @ghengeveld!
• Addon Themes: Define missing React dependencies - #31688, thanks @ghengeveld!
• Addon-vitest: Fix adding with --skip-install failing missing packageJson invariant - #31720, thanks @JReinhold!
• AddonDocs: Remove export of blocks - #31724, thanks @ndelangen!
• Automigration: Enhance removeEssentials to convert options - #31658, thanks @ndelangen!
• CLI: Don't install addon-onboarding during minimal installs - #31616, thanks @ghengeveld!

[!NOTE]
Version 9.0.7 was skipped because of a bad release of eslint-plugin-storybook.