README
@chakra-ui/storybook-addon
Use Chakra UI in your Storybook stories.
This Plugin wraps each of your stories with ChakraProvider
which can be configured using Storybook parameters.
Installation
yarn
yarn add -D @chakra-ui/storybook-addon
npm
npm i -D @chakra-ui/storybook-addon
Add the addon to your configuration in .storybook/main.js
:
module.exports = {
addons: ["@chakra-ui/storybook-addon"],
}
ChakraProvider
Configuring If you need to customize the props passed to ChakraProvider
for your stories
(to use a custom theme
, for example), you'll need to create custom Storybook
parameters.
To set global parameters for this addon, add a chakra
object to the
parameters
export in .storybook/preview.js
:
import myTheme from "../theme"
export const parameters = {
chakra: {
theme: myTheme,
},
}
The chakra
parameters take the same shape as the props
for ChakraProvider
.
See the ChakraProvider
props table to see the list of
possible parameters.
ChakraProvider
configuration for individual components or stories
Overriding Storybook allows you to define parameters at multiple levels: global, component, and story. We recommend setting default parameters at the global level, and overriding them at the component or story when necessary. See the Storybook Parameters documentation for more information.
Color Mode Switch
You will be able to toggle your color mode with the button in the top right corner as you can see below: