Automatic visual tests in Storybook, plus 2.2x faster build times for React+TSVisual test with Chromatic
Back to integrations
Add your integration
  • ⭐️ Popular
  • 🧩 Essentials
  • 🛠 Code
  • ⚡️ Data & state
  • ✅ Test
  • 💅 Style
  • 🎨 Design
  • ⚙️ Appearance
  • 🗄 Organize
How to install addons Create an addon
CSS Custom Properties
This addon allows you to customize the CSS Properties of your project
npm install @bissolli/storybook-css-properties
Last updated over 1 year ago
Downloads per week
Readme View on GitHub

Storybook Addon CSS Custom Properties

This addon allows you to customize the CSS Properties of you project.

A Vue3 friendly addon: you won't face any problem with @types/react by using this addon =)

It will grab all the CSS Custom Properties from our project automatically, cast it between color and text based on the browser's native method response and display in a custom panel where you can easily modify it.



Run it in your terminal:

npm install -D @bissolli/storybook-css-properties

Then, add following content to .storybook/main.js:

module.exports = {
  addons: ['@bissolli/storybook-css-properties'],

Done, the addons will identify all the available CSS Custom Properties on your components and make it available for edition in the CSS Properties panel.


The addon will do all job for you, but if for some reason you need to customize something yourself, we have a few tricks available for you.

Through the preview.{ts|js} file, you can simpily play with the addon parameters to get the desired output.


export const parameters: Parameters = {
  cssCustomProperties: {
    // list here all the props you would like to customize manually
    // this will deepmerge and override any setup that was automatically done
    // by the addon
    props: {
      // prop name
      '--font-size': {
        // description to be shown in the table
        description: 'This property is the only one coming from the `Text` component',
        // if you want to group items, use this props
        // this has a higher weight than the following `matchCategory`
        category: 'Button properties'
    // props listed here won't be visible in the panel to be customized
    hiddenProps: [
    // to make your life easier when grouping props
    // you can use regex to match props name and add under a section in the table
    // the key is the name of the section
    matchCategory: {
      color: /color/,
      typograph: /font/,
      space: /(space|padding|margin|line-height)/

The example above will output the following Panel


Join the community
6,324 developers and counting
WhyWhy StorybookComponent-driven UI
Open source software

Maintained by
Special thanks to Netlify and CircleCI