# @chakra-ui/storybook-addon

> The official Storybook Addon for Chakra UI

Latest version **5.2.5** (published 2024-10-09) · MIT license · 0 weekly downloads

## Install

```sh
npm install @chakra-ui/storybook-addon
pnpm add @chakra-ui/storybook-addon
yarn add @chakra-ui/storybook-addon
bun add @chakra-ui/storybook-addon
```

## Health

**Score 55/100 (C)** — status: stable.

Positive: has types; esm support; no vulnerabilities; high maintenance score; popular repo.

Warnings: low downloads.

Negative: stale.

## Facts

| | |
|---|---|
| Version | 5.2.5 |
| Published | 2024-10-09 |
| First published | 2021-12-09 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 82.2 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 40666 |
| Author | Andres Tuñón |
| Maintainers | segunadebayo, _codebender828 |
| Keywords | storybook-addon, chakra-ui, storybook, addons, dark-mode |

## Links

- npm: https://www.npmjs.com/package/@chakra-ui/storybook-addon
- Repository: https://github.com/chakra-ui/chakra-ui
- Homepage: https://github.com/chakra-ui/chakra-ui#readme
- Issues: https://github.com/chakra-ui/chakra-ui/issues
- npm.io page: https://npm.io/package/@chakra-ui/storybook-addon

## Alternatives

- [@progress/kendo-ooxml](https://npm.io/package/@progress/kendo-ooxml.md) — 152.1K weekly downloads
- [@progress/kendo-react-ripple](https://npm.io/package/@progress/kendo-react-ripple.md) — 8.0K weekly downloads
- [@progress/kendo-react-orgchart](https://npm.io/package/@progress/kendo-react-orgchart.md) — 4.3K weekly downloads
- [@praxisui/dynamic-fields](https://npm.io/package/@praxisui/dynamic-fields.md) — 2.4K weekly downloads
- [@mesalvo/react-ui](https://npm.io/package/@mesalvo/react-ui.md) — 1.7K weekly downloads

## Recent versions

- 5.2.5 (latest) — 2024-10-09
- 5.2.7 (v2-latest) — 2025-02-19
- 0.0.0-dev-20240315145938 (dev) — 2024-03-15
- 0.0.0-v3-20240109123510 (next) — 2024-01-09
- 0.0.0-next-dev-202241614737 (next-dev) — 2022-05-16
- 0.0.0-pr-202215132532 (pr) — 2022-02-05
- 5.2.6 — 2024-11-07
- 0.0.0-v2-latest-20241107153126 — 2024-11-07
- 5.2.4 — 2024-10-04
- 5.2.3 — 2024-10-03
- 5.2.2 — 2024-10-02
- 0.0.0-v2-latest-20241002175335 — 2024-10-02
- 0.0.0-v2-latest-20241002174536 — 2024-10-02
- 0.0.0-v2-latest-20241002170600 — 2024-10-02
- 5.2.1 — 2024-10-01
- … 336 more at https://npm.io/package/@chakra-ui/storybook-addon/versions

## README

# @chakra-ui/storybook-addon

Use Chakra UI in your Storybook stories.

This Plugin wraps each of your stories with [`ChakraProvider`][chakraprovider]
which can be configured using Storybook parameters.

## Installation

### yarn

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

### npm

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

Add the addon to your configuration in `.storybook/main.js` and disable the
emotion alias (available with Storybook >6.4).

```js
module.exports = {
  addons: ["@chakra-ui/storybook-addon"],
  features: {
    emotionAlias: false,
  },
}
```

## Configuring `ChakraProvider`

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`:

```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][chakraprovider] to see the list of
possible parameters.

### Overriding `ChakraProvider` configuration for individual components or stories

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](https://storybook.js.org/docs/react/writing-stories/parameters)
for more information.

## Color Mode Tool

You will be able to toggle your color mode with the button in the toolbar. It
tries to sync with your theme through the localstorage key.

## Story Controls for Theme Components

Get controls for the theming props `variant`, `size` and `colorScheme` in your
stories with `getThemingArgTypes(theme, componentName)`.

```tsx
import { Meta, StoryFn } from "@storybook/react"
import { getThemingArgTypes } from "@chakra-ui/storybook-addon"
import { theme } from "<your-theme>"

export default {
  title: "Components / Forms / Button",
  // get controls for `variant`, `size` and `colorScheme`
  argTypes: getThemingArgTypes(theme, "Button"),
} as Meta

interface StoryProps extends ThemingProps<"Button"> {}

export const Basic: StoryFn<StoryProps> = (props) => (
  <Button {...props}>Button</Button>
)
```

This will render input fields to choose the theming prop values:

![Storybook screenshot with controls tab](theming-arg-types.png)

[chakraprovider]:
  https://chakra-ui.com/docs/getting-started#chakraprovider-props

---
_Source: https://npm.io/package/@chakra-ui/storybook-addon · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._