Styling Addon: configure styles and themes in StorybookAutomate with Chromatic
Storybook Day 2023
Back to integrations
Add your integration
  • ⭐️ Popular
  • 🧩 Essentials
  • 🛠 Code
  • ⚡️ Data & state
  • ✅ Test
  • 💅 Style
  • 🎨 Design
  • ⚙️ Appearance
  • 🗄 Organize
How to install addons Create an addon
Addon to provide locale switcher and react-intl for storybook
npm install storybook-addon-intl
Last updated almost 4 years ago
Downloads per week
Readme View on GitHub

Intl Addon Build Status

The Intl addon can be used to provide locale switcher and react-intl.

Getting Started

First, install the addon

npm install -D storybook-addon-intl

Note: Following peer dependencies are required: @storybook/addons, @storybook/react, react and react-intl.

Add this line to your addons.js file (create this file inside your storybook config directory if needed).

import 'storybook-addon-intl/register';

In your config.js import the setIntlConfig and withIntl function. Use setIntlConfig to set the configuration for react-intl and `withIntl´ as decorator.

import { addDecorator, configure } from '@storybook/react';
import { setIntlConfig, withIntl } from 'storybook-addon-intl';

// Load the locale data for all your defined locales
import { addLocaleData } from 'react-intl';
import enLocaleData from 'react-intl/locale-data/en';
import deLocaleData from 'react-intl/locale-data/de';


// Provide your messages
const messages = {
    'en': { 'button.label': 'Click me!' },
    'de': { 'button.label': 'Klick mich!' }

// Provide your formats (optional)
const formats = {
    'en': {
            'date': {
                'year-only': {
                    'year': '2-digit',
    'de': {
            'date': {
                'year-only': {
                    'year': 'numeric',

const getMessages = (locale) => messages[locale];
const getFormats = (locale) => formats[locale];

// Set intl configuration
    locales: ['en', 'de'],
    defaultLocale: 'en',

// Register decorator

// Run storybook
configure(() => require('./stories'), module);


Accessing nonexistent addons channel error:

This error can be caused by multiple conflicting versions of @storybook/addons in your app.

  • Ensure that the entries starting with @storybook/addon- in your package.json refer to the same and latest version.
  • Add the latest version of @storybook/addons to your app's dependencies and reinstall all modules.

If the above steps don't solve the issue, please read the storybook documentation on this topic:

Most of the time, the fix is deleting the node_modules folder with any package-lock.json or yarn.lock and reinstalling.

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

Maintained by
Special thanks to Netlify and CircleCI