Skip to main content

Chakra UI + Storybook

Use the official Storybook Addon for Chakra UI to configure Storybook to automatically wrap your stories with the <ChakraProvider /> and add a color mode toggle.

Installation​

yarn add -D @chakra-ui/storybook-addon
npm i -D @chakra-ui/storybook-addon

@chakra-ui/storybook-addon@>2.0.0 is compatible with storybook >6.4

Usage​

Add the addon to your configuration in .storybook/main.js:

module.exports = {
  addons: ["@chakra-ui/storybook-addon"],
  features: {
    emotionAlias: false,
  },
};

You can specify global parameters for the addon in .storybook/preview.js. These options are the same as the props to ChakraProvider (without children).

// .storybook/preview.js

const theme = require("../path/to/your/theme");

export const parameters = {
  chakra: {
    theme,
  },
};

colorModeManager

Description

manager to persist a users color mode preference in omit if you don't render server-side for SSR: choose cookieStorageManager

Type
StorageManager
Default
localStorageManager

cssVarsRoot

Type
string

environment

Description

The environment (window and document) to be used by all components and hooks. By default, we smartly determine the ownerDocument and defaultView based on where ChakraProvider is rendered.

Type
Environment

portalZIndex

Description

Common z-index to use for Portal

Type
number
Default
undefined

resetCSS

Description

If true, CSSReset component will be mounted to help you reset browser styles

Type
boolean
Default
true

theme

Description

a theme. if omitted, uses the default theme provided by chakra

Type
Dict<any>

Troubleshooting Storybook​

If you're facing an issue where Storybook isn't working with Chakra UI, here's a work around 👇

In your .storybook/main.js file, you'll need to config the features and webpackFinal properties like so:

module.exports = {
  stories: ["../**/*.stories.mdx", "../**/*.stories.@(js|jsx|ts|tsx)"],
  addons: ["@storybook/addon-links", "@storybook/addon-essentials"],
  framework: "@storybook/react",
  features: { emotionAlias: false },
  webpackFinal: async (config) => {
    config.module.rules.push({
      test: /\.mjs$/,
      include: /node_modules/,
      type: "javascript/auto",
    });

    return config;
  },
};

On this page