New
I18n with StorybookAutomate with Chromatic
Star74,141
View full catalog
Categories
  • ⭐️ Popular
  • 🧩 Essentials
  • 🛠 Code
  • ⚡️ Data & state
  • ✅ Test
  • 💅 Style
  • 🎨 Design
  • ⚙️ Appearance
  • 🗄 Organize
How to install addons Create an addon Add to the catalog
Responsive Columns
A responsive, grid-based columns overlay.
npm install storybook-addon-responsive-columns
Last updated about 1 month ago
20
Downloads per week
Readme View on GitHub

Storybook Addon Responsive Columns

A responsive, grid-based columns overlay. Define your grids using either global or local parameters, and tweak your grid properties using Columns controls panel.

View an interactive demo.

example screenshot

Installation

yarn add -D storybook-addon-responsive-columns

within .storybook/main.js:

module.exports = {
  addons: ['storybook-addon-responsive-columns'],
};

Usage

storybook-addon-responsive-columns comes with some defaults to get you started.

Property Default Type
active false boolean
gridColor tomato string
opacity 30 number
breakpoints see here object[]

If you'd like to use custom parameters, you can do so globally using the columns key in ./storybook/preview.js:

export const parameters = {
  columns: {
    active: true,
    gridColor: "salmon",
    opacity: 30,
    breakpoints: [
      {
        breakpoint: 0,
        columns: 4,
        gap: 8,
      },
      {
        breakpoint: 768,
        columns: 8,
        gap: 16,
      },
      {
        breakpoint: 1024,
        columns: 12,
        gap: 16,
        maxWidth: 1224,
        gutter: 24,
      },
    ],
  },
};

or locally by adding columns to the parameters key in your story's metadata:

export default {
  parameters: {
    columns: {
      ...
    },
  },
};
Join the community
5,777 developers and counting
WhyWhy StorybookComponent-driven UI
Open source software
Storybook

Maintained by
Chromatic
Special thanks to Netlify and CircleCI