Back to integrations
Add your integration
Categories
  • ⭐️ Popular
  • 🧩 Essentials
  • 🛠 Code
  • ⚡️ Data & state
  • ✅ Test
  • 💅 Style
  • 🎨 Design
  • ⚙️ Appearance
  • 🗄 Organize
How to install addons Create an addon
Text Direction
Toggle between LTR and RTL text direction
npm install storybook-addon-text-direction
Last updated 24 days ago
12
Downloads per week
Readme View on GitHub

Storybook Addon Text Direction

Installation

First, install the package.

npm install --save-dev storybook-addon-text-direction

Then, register it as an addon in .storybook/main.js.

// .storybook/main.ts

// Replace your-framework with the framework you are using (e.g., react-webpack5, vue3-vite)
import type { StorybookConfig } from '@storybook/your-framework';

const config: StorybookConfig = {
  // ...rest of config
  addons: [
    '@storybook/addon-essentials'
    'storybook-addon-text-direction', // 👈 register the addon here
  ],
};

export default config;

Usage

The primary way to use this addon is to define the textDirection parameter. You can do this at the component level, as below, to affect all stories in the file, or you can do it for a single story.

// Button.stories.ts

// Replace your-framework with the name of your framework
import type { Meta } from 'storybook-addon-text-direction';

import { Button } from './Button';

const meta: Meta<typeof Button> = {
  component: Button,
  parameters: {
    textDirection: 'rtl',
  }
};

export default meta;
Join the community
6,622 developers and counting
WhyWhy StorybookComponent-driven UI
DocsGuidesTutorialsChangelogTelemetry
CommunityAddonsGet involvedBlog
ShowcaseExploreProjectsComponent glossary
Open source software
Storybook

Maintained by
Chromatic
Special thanks to Netlify and CircleCI