New
Storybook for full-stack developersAutomate with Chromatic
Star75,295
Back to integrations
Add your integration
Categories
  • ⭐️ Popular
  • 🧩 Essentials
  • 🛠 Code
  • ⚡️ Data & state
  • ✅ Test
  • 💅 Style
  • 🎨 Design
  • ⚙️ Appearance
  • 🗄 Organize
How to install addons Create an addon
storybook-addon-styled-components-themes
Storybook addon for styled components with theme provider
npm install storybook-addon-styled-components-themes
Last updated over 1 year ago
891
Downloads per week
Readme View on GitHub

Storybook/Addon: styled-components with themes

Storybook addon for styled components with theme provider

Getting Started

Installing

yarn add storybook-addon-styled-components-themes --D

Configuration

Register the addon in .storybook/main.js

module.exports = {
  stories: ['../src/**/*.stories.(tsx|mdx)'],
  addons: ['storybook-addon-styled-components-themes/register']
};

Add parameters to stories in .storybook/preview.js

addParameters({
  styledComponentsThemes: {
    /**
     * Themes
     */
    themes: [ThemeA, ThemeB],
    /**
     * Theme to start on - index - optional
     */
    initialTheme: 1, // optional
    /**
     *  Key for show name of theme - optional
     */
    label: 'name', // optional
  },
});

Add decorator to stories in .storybook/preview.js

addDecorator(story => (
    <WithThemeProvider>
        {story()}
    </WithThemeProvider>
));

License

This project is licensed under the MIT License - see the LICENSE.md file for details

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

Maintained by
Chromatic
Special thanks to Netlify and CircleCI