New
Storybook 7.6Visual test with Chromatic
Star81,125
Back to integrations
Add your integration
Categories
  • ⭐️ Popular
  • 🧩 Essentials
  • 🛠 Code
  • ⚡️ Data & state
  • ✅ Test
  • 💅 Style
  • 🎨 Design
  • ⚙️ Appearance
  • 🗄 Organize
How to install addons Create an addon
storybook-addon-custom-properties
Storybook addon to set the Custom Properties in Preview AreaStorybook addon to set the Custom Property in Preview Area
npm install storybook-addon-custom-properties
Last updated over 3 years ago
23
Downloads per week
Readme View on GitHub

Storybook Custom Properties Addon

Storybook Custom Properties Addon allows you to set a Custom Properties in the Preview Area. This helps to change the style of the Storybook via Custom Properties.

Installation

Install the following npm module:

npm i --save-dev storybook-addon-custom-properties

within .storybook/main.js:

module.exports = {
  addons: ['storybook-addon-custom-properties/register'],
};

Configuration

Configured by story parameters with the custom-properties key.

import { withCustomProperties } from 'storybook-addon-custom-properties';

addParameters({
  'custom-properties': {
    label: 'Theme',
    list: [
      { '--somekeyword': 'left' },
      { '--somecolor': '#0000ff' },
      { '--somecomplexvalue': '3px 6px rgb(20, 32, 54)' }, 
    ]
  }
});

addDecorator(withCustomProperties);

TODO

  • Doc
  • Ts
  • formatter
Join the community
6,382 developers and counting
WhyWhy StorybookComponent-driven UI
Open source software
Storybook

Maintained by
Chromatic
Special thanks to Netlify and CircleCI