Components

Direction

Sets text direction for every component below it.

Installation

npx shadcn@latest add @blank/direction

Usage

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

<DirectionProvider dir="rtl">
  <App />
</DirectionProvider>

Examples

Tabs

Keyboard order follows the provider, so in RTL the arrow keys move from right to left. Set dir on the DOM as well, because the provider tells Radix and not the browser.

تتحرك مفاتيح الأسهم من اليمين إلى اليسار.