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

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

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