or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

index.mdprovider-system.mdtheming-argtypes.mdtoolbar-controls.md
tile.json

tessl/npm-chakra-ui--storybook-addon

The official Storybook addon for Chakra UI providing theming, color mode, and direction controls

Workspace
tessl
Visibility
Public
Created
Last updated
Describes
npmpkg:npm/@chakra-ui/storybook-addon@5.2.x

To install, run

npx @tessl/cli install tessl/npm-chakra-ui--storybook-addon@5.2.0

index.mddocs/

Chakra UI Storybook Addon

The official Storybook addon for Chakra UI providing seamless integration of Chakra UI components within Storybook stories. The addon automatically wraps stories with ChakraProvider and offers configurable theming parameters, color mode toggle, and layout direction controls.

Package Information

  • Package Name: @chakra-ui/storybook-addon
  • Package Type: npm
  • Language: TypeScript
  • Installation: npm install --save-dev @chakra-ui/storybook-addon

Core Imports

import { getThemingArgTypes } from "@chakra-ui/storybook-addon";
import type { ThemingProps } from "@chakra-ui/react";
import type { ArgTypes } from "@storybook/react";

For accessing specific modules:

import { getThemingArgTypes } from "@chakra-ui/storybook-addon/arg-types";

For Storybook decorator types:

import type { DecoratorFunction, Renderer } from "@storybook/types";

CommonJS:

const { getThemingArgTypes } = require("@chakra-ui/storybook-addon");

Basic Usage

Storybook Configuration (.storybook/main.js):

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

Global Theme Configuration (.storybook/preview.js):

import myTheme from "../theme";

export const parameters = {
  chakra: {
    theme: myTheme,
  },
};

Story with Theming Controls:

import { Meta, StoryFn } from "@storybook/react";
import { Button } from "@chakra-ui/react";
import { getThemingArgTypes } from "@chakra-ui/storybook-addon";
import { theme } from "../theme";

export default {
  title: "Components / Button",
  argTypes: getThemingArgTypes(theme, "Button"),
} as Meta;

interface StoryProps extends ThemingProps<"Button"> {
  children?: React.ReactNode;
}

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

Entry Points

The addon provides multiple entry points for different use cases:

// Main entry point - exports getThemingArgTypes function
import { getThemingArgTypes } from "@chakra-ui/storybook-addon";

// ArgTypes utilities entry point
import { getThemingArgTypes } from "@chakra-ui/storybook-addon/arg-types";

// Manager entry point - registers toolbar tools (automatic)
import "@chakra-ui/storybook-addon/manager";

// Preview entry point - provides Provider decorator (automatic)
import "@chakra-ui/storybook-addon/preview";

The manager entry point registers the ColorModeTool and DirectionTool in Storybook's toolbar. The preview entry point provides the Provider decorator that wraps stories with ChakraBaseProvider. Both are automatically loaded when the addon is configured in .storybook/main.js.

Architecture

The addon consists of several key components:

  • Provider System: Automatic ChakraProvider wrapping with theme and direction support
  • Toolbar Tools: Interactive controls for color mode and text direction switching
  • ArgTypes Generation: Automatic Storybook controls for theme component properties
  • Event Communication: Storybook channel-based messaging between manager and preview
  • Theme Integration: Deep integration with Chakra UI's theming system

Capabilities

Theming ArgTypes Generation

Automatically generates Storybook controls for Chakra UI theme component properties including variant, size, and colorScheme.

function getThemingArgTypes<
  Theme extends {
    colors: Record<string, any>;
    components: Record<string, any>;
  },
  ComponentName extends KeyOf<Theme["components"]>
>(theme: Theme, componentName: ComponentName): ArgTypes<
  Partial<Pick<ThemingProps<ComponentName>, ThemingArgTypeKey>>
> | undefined;

type ThemingArgTypeKey = "variant" | "size" | "colorScheme";

Theming ArgTypes

Provider and Decoration

ChakraProvider integration that wraps stories with theming support, direction control, and color mode synchronization.

const Provider: DecoratorFunction<Renderer>;

Provider System

Toolbar Controls

Interactive toolbar controls for managing color mode (light/dark) and layout direction (LTR/RTL) directly from Storybook's interface.

const ColorModeTool: React.FC;
const DirectionTool: React.FC;

Toolbar Controls

Types

type ThemingArgTypeKey = "variant" | "size" | "colorScheme";

type KeyOf<T> = [T] extends [never]
  ? never
  : T extends object
  ? Extract<keyof T, string>
  : never;

interface StoryContext<TRenderer extends Renderer = Renderer> {
  id: string;
  title: string;
  name: string;
  globals: Record<string, any>;
  parameters: Record<string, any>;
}

type StoryFn<TRenderer extends Renderer = Renderer> = (
  args: Record<string, any>,
  context: StoryContext<TRenderer>
) => TRenderer["storyResult"];

type DecoratorFunction<TRenderer extends Renderer = Renderer> = (
  storyFn: StoryFn<TRenderer>,
  context: StoryContext<TRenderer>
) => TRenderer["storyResult"];

interface Renderer {
  component: any;
  storyResult: any;
}

Constants

const ADDON_ID = "@chakra-ui/storybook-addon";
const COLOR_MODE_TOOL_ID = `${ADDON_ID}/color-mode-tool`;
const DIRECTION_TOOL_ID = `${ADDON_ID}/direction-tool`;

const EVENTS = {
  TOGGLE_COLOR_MODE: `${ADDON_ID}/toggleColorMode`,
  TOGGLE_DIRECTION: `${ADDON_ID}/toggleDirection`,
};