Using Chakra UI in Storybook
A guide for using Chakra UI with Storybook
Installation
1
Install dependencies
Install the required dependencies for Chakra UI and Storybook.
npm i @storybook/addon-themes @chakra-ui/react@next @emotion/react
2
Setup Preview
Edit the .storybook/preview.tsx
file to include the Chakra UI provider.
import { ChakraProvider, defaultSystem } from "@chakra-ui/react"
import type { Preview } from "@storybook/react"
const preview: Preview = {
// ...
decorators: [
(Story) => (
<ChakraProvider value={defaultSystem}>
<Story />
</ChakraProvider>
),
],
}
export default preview
3
Setup dark mode toggle
Use the withThemeByClassName
decorator from @storybook/addon-themes
to add a
color mode toggle to the Storybook toolbar.
import { withThemeByClassName } from "@storybook/addon-themes"
import type { Preview, ReactRenderer } from "@storybook/react"
const preview: Preview = {
decorators: [
// ...
withThemeByClassName({
defaultTheme: "light",
themes: { light: "", dark: "dark" },
}),
],
}
export default preview
4
Start the Storybook server
npm run storybook
5
Enjoy!
Use Chakra UI components in your stories.
import { Button } from "@chakra-ui/react"
export const SampleStory = {
render() {
return <Button>Click me</Button>
},
}