Back to integrations
Add your integration
  • ⭐️ 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 3 months ago
Downloads per week
Readme View on GitHub

Storybook Addon RTL Version

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

This is a permanent fork of unindented/storybook-addon-rtl, which is now archived. Thanks for unindented for the original code!

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

Then write your stories normally:

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

export default {
  title: 'My Component',
  component: MyComponent

export const default = {};

export const rtlParameter = {
  // Optionally include direction as story parameter
  parameters: {
    direction: 'rtl'

Query Params

You can also set the direction using query params in the URL. This is useful for things like e2e tests.

Just add &direction=rtl or &direction=ltr to the end of the URL:




Copyright (c) 2023 Benjamin Kindle (@literalpie). This is free software, and may be redistributed under the terms specified in the LICENSE file.

Join the community
6,622 developers and counting
WhyWhy StorybookComponent-driven UI
CommunityAddonsGet involvedBlog
ShowcaseExploreProjectsComponent glossary
Open source software

Maintained by
Special thanks to Netlify and CircleCI