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 RTL
Right-to-left addon for Storybook.
npm install storybook-addon-rtl
Last updated 4 months ago
13.6k
Downloads per week
Readme View on GitHub

Storybook Addon RTL Version Build Status

Storybook Addon RTL allows you to switch to right-to-left flow in your stories in Storybook.

This addon has been tested with Storybook for React, Vue and Angular. It should also work in other frameworks.

Storybook Addon RTL Demo

Getting Started

npm i --save-dev storybook-addon-rtl

Add the addon to the addons array in .storybook/main.js

module.exports = {
  /// other storybook configuration
  addons: [
    // other addons here
    "storybook-addon-rtl",
  ],
};

Add the following to preview.js:

import { initializeRTL } from 'storybook-addon-rtl';

initializeRTL();

Then write your stories normally:

import React from 'react'
import MyComponent from './MyComponent'

export default {
  title: 'My Component',
  component: MyComponent
}
const Template = (args) => <MyComponent {...args}/>
export const default = Template.bind({})

// Optionally include direction as story parameter
rtlParameter.parameters = {
  direction: 'rtl'
}

Meta

Contributors

License

Copyright (c) 2017 Daniel Perez Alvarez (unindented.org). This is free software, and may be redistributed under the terms specified in the LICENSE file.

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