Community Showcase #5Visual 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

Integrate Vanilla Extract and Storybook

Get zero-runtime stylesheets in TypeScript. This recipe shows you how to get the most out of Vanilla Extract in Storybook.

This recipe assumes that you are using Storybook >= 7.0. If you haven't set up Storybook yet, run the following command in the root of your project:

How to setup Vanilla Extract and Storybook

Vanilla Extract Uses TypeScript as your CSS preprocessor. Allowing you to write type‑safe, locally scoped classes, variables and themes, then generate static CSS files at build time. Storybook is an industry-standard tool for developing and testing UI components in isolation.

Configure your Storybook builder

If you're already using Vanilla Extract in your project, you may already have these dependencies installed.

First of all, install the required dependencies:


For Vite users, Storybook uses your project's vite.config.js for its build configuration. This means if your project uses Vanilla Extract, it's also already configured for your Storybook. 🎉

You can view a full example on Stackblitz.


For Webpack users, add a webpackFinal function to your main.ts file like so:

You can view a full example on Stackblitz.

Get involved

Now you're ready to use Vanilla Extract with Storybook. 🎉 If you use Vanilla Extract at work, we'd love your feedback on the Vanilla Extract + Storybook experience.

Join the maintainers and our thriving community in Discord.

Join the community
6,178 developers and counting
WhyWhy StorybookComponent-driven UI
Open source software

Maintained by
Special thanks to Netlify and CircleCI