Direction for React Aria

Q: How do I set up a right-to-left (RTL) layout in React?

Set dir="rtl" on the html element and wrap the app in DirectionProvider with direction="rtl". The attribute flips the CSS and Tailwind's rtl: variants; the provider tells the components, so popovers, sliders and arrow keys follow the reading direction.

Q: Why do I need DirectionProvider if the html tag already has dir?

Because the two do different jobs. The dir attribute only changes the layout; the components read the direction from the provider to place their menus and to map the left and right arrow keys. With only one of them, the page is half mirrored.

Q: How do I read the current text direction in a component?

Call useDirection() inside the provider: it returns "ltr" or "rtl". Use it to swap an icon or to set dir on an element you render yourself.

Q: How does DirectionProvider relate to the locale?

It sets the locale too: pass locale, like ar-EG or he-IL, for formatting dates and numbers, or leave it out and the provider picks a locale for that direction.

Q: Can only part of the page be right-to-left?

Yes. Providers nest: wrap that part in its own DirectionProvider and set dir="rtl" on its outer element. Everything outside keeps the outer direction, which is useful for previews or quoted content.

Set one region left to right or right to left without flipping the rest of the page. For React with React Aria, when menus and CSS should follow it.

The provider sets reading direction for one region and leaves the rest of the page alone.

Wrap a subtree when only that region reads the other way, and set dir on the same element so the CSS follows. One field on its own can take dir on an Input and skip the provider. In React, React Aria menus and arrow keys read the provider, which the attribute alone does not set.

PreviewCode

StartltrEnd

Installation

Free with an account. It carries your token, so the CLI installs everything in one go.

Google GitHub

Use email insteadNo credit card

Anatomy

Usage

import { DirectionProvider } from "@/components/ui/direction";

<DirectionProvider direction="ltr">
  <p>Content inherits the provided direction.</p>
</DirectionProvider>

import { useDirection } from "@/components/ui/direction";

const Example = () => {
  const direction = useDirection();
  return <div>Current direction: {direction}</div>;
};

See the RTL configuration guide for document-level direction. This page does not replace locale setup.

Demos

Rtl

The same Start and End row, but the provider direction is rtl and the wrapper sets dir to match. useDirection reports rtl, Start moves to the right, and the end margin pushes End toward the left. Set both. One without the other leaves either the components or the CSS unflipped.

PreviewCode

FAQ

How do I set up a right-to-left (RTL) layout in React?

Set dir="rtl" on the html element and wrap the app in DirectionProvider with direction="rtl". The attribute flips the CSS and Tailwind's rtl: variants; the provider tells the components, so popovers, sliders and arrow keys follow the reading direction.

Why do I need DirectionProvider if the html tag already has dir?

Because the two do different jobs. The dir attribute only changes the layout; the components read the direction from the provider to place their menus and to map the left and right arrow keys. With only one of them, the page is half mirrored.

How do I read the current text direction in a component?

Call useDirection() inside the provider: it returns "ltr" or "rtl". Use it to swap an icon or to set dir on an element you render yourself.

How does DirectionProvider relate to the locale?

It sets the locale too: pass locale, like ar-EG or he-IL, for formatting dates and numbers, or leave it out and the provider picks a locale for that direction.

Can only part of the page be right-to-left?

Yes. Providers nest: wrap that part in its own DirectionProvider and set dir="rtl" on its outer element. Everything outside keeps the outer direction, which is useful for previews or quoted content.

Should icons flip in a right-to-left layout?

Only icons that point forward or back, like arrows and chevrons: add the rtl:rotate-180 class or swap them with useDirection(). Checkmarks, play buttons, clocks and logos stay as they are.