Storybook’s Visual Tests addon enters betaVisual test with Chromatic
Back to integrations
Add your integration
  • ⭐️ Popular
  • 🧩 Essentials
  • 🛠 Code
  • ⚡️ Data & state
  • ✅ Test
  • 💅 Style
  • 🎨 Design
  • ⚙️ Appearance
  • 🗄 Organize
How to install addons Create an addon
Customize antd theme
a Storybook addon help you visually customize an ant design theme
npm install storybook-addon-customize-antd-theme
Last updated over 2 years ago
Downloads per week
Readme View on GitHub

npm version GitHub license code style: prettier


A Storybook addon that help you visually customize an ant design theme in the addon panel for better UI-development workflow.

English | 简体中文


  • Storybook@>=6.0.0

Getting started

1. Install

npm install -D storybook-addon-customize-antd-theme
# yarn add -D storybook-addon-customize-antd-theme

2. Register the addon in main.js

module.exports = {
  stories: ['storybook-addon-customize-antd-theme/dist/esm/stories/index.js'],
  addons: ['storybook-addon-customize-antd-theme'],

3. Setting default story states

You can initial setup ant design theme, by setting the customizeAntdTheme property on parameters:

// .storybook/preview.js

export const parameters = {
  customizeAntdTheme: {
    modifyVars: {
      'primary-color': '#ff1771',
      'border-radius-base': '20px',

modifyVars can also be less string, you can import a less file by raw-loader, for example:

// .storybook/preview.js
import themeLess from '!!raw-loader!../src/theme/theme.less';
export const parameters = {
  customizeAntdTheme: {
    modifyVars: themeLess,
Join the community
6,501 developers and counting
WhyWhy StorybookComponent-driven UI
Open source software

Maintained by
Special thanks to Netlify and CircleCI