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#

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

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

pnpm add -D @chakra-ui/storybook-addon

The Storybook addon is only 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

`disableEnvironment`

Description

Disabled the use of automatic window and document detection. This removed the injected `<span/>` element

Type

boolean

`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