Automatic visual tests in Storybook, plus 2.2x faster build times for React+TSVisual 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
A base addon for configuring popular styling tools in Webpack
npm install @storybook/addon-styling-webpack
Last updated 24 days ago
Downloads per week
Made by Storybook
Readme View on GitHub
addon-styling-webpack Logo


Get started in Storybook 7 faster with popular styling tools.

✨ Features

  • 🤖 Zero-config for popular tools through codemods.
  • 🧩 Configuration templates for popular tools
  • ⚡️ Options for CSS modules, PostCSS, Sass, Less, and Vanilla-extract

🏁 Getting Started

To get started, install the package using the Storybook CLI


pnpm dlx storybook@latest add @storybook/addon-styling-webpack


yarn dlx storybook@latest add @storybook/addon-styling-webpack


npx storybook@latest add @storybook/addon-styling-webpack

🤝 Contributing

If you'd like to contribute to this addon, THANK YOU, I'd love your help 🙏

📝 Development scripts

  • pnpm build build and package your addon code

🌲 Branch structure

  • next - the next version on npm, and the development branch where most work occurs
  • main - the latest version on npm and the stable version that most users use

🚀 Release process

  1. All PRs should target the next branch, which depends on the next version of Storybook.
  2. When merged, a new version of this package will be released on the next NPM tag.
  3. If the change contains a bugfix that needs to be patched back to the stable version, please note that in PR description.
  4. PRs labeled pick will get cherry-picked back to the main branch and will generate a release on the latest npm tag.
Join the community
6,322 developers and counting
WhyWhy StorybookComponent-driven UI
Open source software

Maintained by
Special thanks to Netlify and CircleCI