Neurotic Pantaloon Maker

    TypeScript icon, indicating that this package has built-in type declarations

    0.0.14 • Public • Published

    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



    npm i @bissolli/storybook-css-properties

    DownloadsWeekly Downloads






    Unpacked Size

    81.7 kB

    Total Files


    Last publish


    • gustavobissolli