shadcn.io is not affiliated with official shadcn/ui

Components

Free

Direction for Ark UI

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: 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 Ark 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, Ark 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 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.

API Reference

DirectionProvider

PropType

direction?"ltr" | "rtl"

The reading direction it sets for everything inside it.

Type: "ltr" | "rtl"

locale?string

The locale it sets. When unset, direction picks one (ar-BH for rtl, * en-US otherwise).

useDirection

With other components

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

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

All 105 components