New
Storybook’s Visual Tests addon enters betaVisual test with Chromatic
Star82,043
Back to integrations
Add your integration
Categories
  • ⭐️ Popular
  • 🧩 Essentials
  • 🛠 Code
  • ⚡️ Data & state
  • ✅ Test
  • 💅 Style
  • 🎨 Design
  • ⚙️ Appearance
  • 🗄 Organize
How to install addons Create an addon

Integrate Styled Components and Storybook

Styled Components is a css-in-js framework to build fast and functional components. This recipe shows you how to get the most out of Styled Components in Storybook.

Prerequisites

This recipe assumes that you have a React app using styled-components and have just set up Storybook >=7.0 using the getting started guide. Don’t have this? Follow styled-components' installation instructions then run:

Terminal
Loading...

1. Add @storybook/addon-themes

Run the following script to install and register the addon:

Loading...

This will run a configuration script that will walk you through setting up the addon. When prompted, select styled-components from the configuration options.

Did the configuration script fail?

Under the hood, this runs npx @storybook/auto-config themes, which should read your project and try to configure your Storybook with the correct decorator. If running that command directly does not solve your problem, please file a bug on the @storybook/auto-config repository so that we can further improve it. To manually add this addon, install it, and then add it to the addons array in your .storybook/main.ts.

2. Provide GlobalStyles

In .storybook/preview.js, create a <GlobalStyles /> component that includes a font-family. Then apply it to your stories with the withThemeFromJSXProvider decorator by adding it to the decorators array.

.storybook/preview.jsx
Loading...

If you already have <GlobalStyles /> in your app, you can import it into .storybook/preview.js instead of creating it anew.

3. Provide your theme(s)

To share your theme(s) with the components in Storybook, you'll need to provide them to the withThemeFromJSXProvider decorator along with styled-components <ThemeProvider /> component.

.storybook/preview.jsx
Loading...

When you provide more than one theme, a toolbar menu will appear in the Storybook UI to select your desired theme for your stories.

Get involved

Now you're ready to use styled-components with Storybook. 🎉

If you use styled-components at work, we'd love your help making this setup even easier. Join the maintainers in Discord to get involved, or jump into addon docs.

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

Maintained by
Chromatic
Special thanks to Netlify and CircleCI