New
Styling Addon: configure styles and themes in StorybookAutomate with Chromatic
Storybook Day 2023
Star77,670
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-theme-ui
Storybook Theme UI allows your stories to be displayed in various themes supplied by theme-ui. This addon was made to be primarliy used in conjunction with [Storybook Addon Docs](https://www.npmjs.com/package/@storybook/addon-docs) but can be used withou
npm install storybook-addon-theme-ui
Last updated about 3 years ago
222
Downloads per week
Readme View on GitHub

Storybook Color Theme UI

Storybook Theme UI allows your stories to be displayed in various themes supplied by theme-ui. This addon was made to be primarliy used in conjunction with Storybook Addon Docs but can be used without as well.

Docs Example

Installation

Install the following npm module:

npm i --save-dev storybook-addon-theme-ui theme-ui react

or with yarn:

yarn add -D storybook-addon-theme-ui theme-ui react

Configuration

The color mode addon is configured by story parameters with the themeUi key. To configure globally, import addParameters from your app layer in your config.js file.

import { addParameters } from '@storybook/react';
import * as themes from '../src/themes'

addParameters({
  themeUi: {
    themes: [
      { theme: themes.silverTree, name: 'Silver Tree' },
      { theme: themes.fountainBlue, name: 'Fountain' },
      { theme: themes.pastelRed, name: 'Pastel Red' }
    ]
  },
})

Options can take a object with the following keys:

themes: ThemeMap[]

An array of objects that include both a reference to your theme object and a name that will be displayed in the theme chooser panel.

Theme Map

import { Theme } from 'theme-ui'

type ThemeMap = {
  /**
   * A reference to a theme-ui object.
   */
  theme: Theme 

  /**
   * The display name used in the theme chooser panel.
   */
  name: string
}

withThemeProvider

Like any other storybook decorator just import withThemeProvider from this package and add it to your decorator list.

import React from 'react'
import { withThemeProvider } from 'storybook-addon-theme-ui'
import { Button } from '../Button'

export default {
  title: 'Button', 
  decorators: [withThemeProvider]
 }

export function withText(): JSX.Element {
  return <Button title="Click Me" />
}

Or done globally in your preview.tsx

import { addDecorator } from '@storybook/addons'
import { withThemeProvider } from 'storybook-addon-theme-ui'

addDecorator(withThemeProvider)

Related Projects

This project was built on top of the wonderfully designed Theme UI project.

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

Maintained by
Chromatic
Special thanks to Netlify and CircleCI