Interact with css component tokens dynamically in the Storybook UI
npm install @kickstartds/storybook-addon-component-tokens
Downloads per week

Storybook Component Tokens Addon

npm i -D @kickstartds/storybook-addon-component-tokens

Enable the addon in .storybook/main.js:

module.exports = {
  addons: ["@kickstartds/storybook-addon-component-tokens"],

To use it inside MDX, or when customising the docs page:

import { CssPropsBlock } from "@kickstartds/storybook-addon-component-tokens";


Include your component tokens, the addon will apply and document this automatically.

export default {
  title: "Simple Component",
  parameters: {
    cssprops: {
      "--color-primary": [
          value: "#ff017d",
          selector: ":root"
} as Meta;

Adding to DocsPage and MDX


Modify the docs page based by following the storybook docs. Including <CssPropsBlock /> where you prefer.


This monorepo uses yarn workspaces, run yarn at the root.


[] Look for the args of a defined component when in MDX
[] Configurable per story sessionstorage.
[] Better specificity when injecting styles (with & without iframes) [] Functioning reset button.


Based on storybook-addon-cssprops from Luke Clark (@ljcl).

Portions of this package are sourced from the storybook source code in order to maintain look and feel.