shadcn.io is not affiliated with official shadcn/ui

Components

Free

Direction for React

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. The RTL guide covers the whole setup.

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: 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 Base UI, when menus and CSS should follow that region.

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, Base UI 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. The RTL guide covers the whole setup.

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 only sets the direction: date and number formatting follow each component's own locale prop.

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.

API Reference

DirectionProvider

PropType

direction?"ltr" | "rtl"

The reading direction of the text.

Type: "ltr" | "rtl"
Default: "ltr"

render?ReactElement | ((props: object, state: object) => ReactElement)

Replace the host element or compose it with another component.

Type: ReactElement | ((props: object, state: object) => ReactElement)

useDirection

With other components

Free
Dropdown Menu
Menus
Panels open the other way
Free
Select
Selection
List follows reading
Free
Slider
Controls
Arrow keys reverse
Free
Sheet
Overlays
Slides from the start
Free
Tabs
Navigation
Arrows follow reading
Free
Menubar
Menus
Submenus open inward

Free
Accordion
Disclosure
Chevrons stay on the end
Free
Card
Layout
Forms that mirror
Free
Field
Inputs
Labels flip with dir
Free
Native Select
Selection
Inherits html dir
Free
Pagination
Navigation
Next stays at the end
Free
Breadcrumb
Navigation
Trail reads backward

All 105 components