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
  },
}

Edit this page on GitHub