Back to integrations
Add your integration
Categories
  • ⭐️ Popular
  • 🧩 Essentials
  • 🛠 Code
  • ⚡️ Data & state
  • ✅ Test
  • 💅 Style
  • 🎨 Design
  • ⚙️ Appearance
  • 🗄 Organize
How to install addons Create an addon
Grid Overlay
Storybook addon that enhances the visual layout of Storybook stories by providing a grid overlay
npm install storybook-addon-grid-overlay
Last updated 3 days ago
1.9k
Downloads per week
Readme View on GitHub

storybook-addon-grid-overlay

example of the addon displaying the grid pverlay when active

Storybook addon that enhances the visual layout of your Storybook stories by providing a grid overlay. It allows you to easily align and position your components within a grid system, making it easier to create clean, consistent designs.

With this package, you can define custom grid settings, such as grid max size, column count, gap and gutter spacing, and easily toggle the grid overlay on or off while previewing your components in Storybook.

Installation

Using npm:

npm install --save-dev storybook-addon-grid-overlay

Using yarn:

yarn add storybook-addon-grid-overlay --dev

Add the following to your .storybook/main.js exports:

module.exports = {
  addons: ['storybook-addon-grid-overlay']
};

Customization

The grid can be customized using parameters, you can set them globally or per story.

Parameters

Name Description Type Default value Required
columns The number of columns number | string 12 no
gap The gap between columns string '20px' no
gutter Horizontal gutter (spacing) string '0px' no
maxWidth The maximum width of the overlay string 'none' no
color The color of the columns string 'rgba(255, 71, 132, 0.15)' no

Global setup

export const parameters = {
  gridOverlay: {
    columns: 12,
    gap: '20px',
    gutter: '20px',
    maxWidth: '1024px'
  }
};

Story setup

export const MyComponent = () => {...};

MyComponent.parameters = {
	gridOverlay: {
        gutter: '20px'
    }
};

Using css variables

The storybook-addon-grid-overlay is designed to accept CSS variables as parameters, allowing you to make the grid responsive to your designs.

@media (min-width: 768px) {
  :root {
    --columns: 8;
    --gap: 12px;
    --gutter: 24px;
    --maxWidth: 1024px;
  }
}
export const parameters = {
  gridOverlay: {
    columns: 'var(--columns)',
    gap: 'var(--gap)',
    gutter: 'var(--gutter)',
    maxWidth: 'var(--maxWidth)'
  }
};
Join the community
6,562 developers and counting
WhyWhy StorybookComponent-driven UI
DocsGuidesTutorialsChangelogTelemetryStatus
CommunityIntegrationsGet involvedBlog
ShowcaseExploreProjectsComponent glossary
Open source software
Storybook

Maintained by
Chromatic
Special thanks to Netlify and CircleCI