Direction

A provider component that sets the text direction for your application.

Hello

Current direction: ltr

Installation

npx shadcn@latest add https://reactdocs.canceydejean.dev/r/direction.json

Usage

Sets text direction (ltr or rtl) for Base UI components. Essential for right-to-left languages such as Arabic, Hebrew, and Persian. Built on Base UI Direction Provider. Also set dir on the document root for browser layout.

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

<html dir="rtl">
  <body>
    <DirectionProvider direction="rtl">
      {/* Your app content */}
    </DirectionProvider>
  </body>
</html>;

useDirection

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

export function Example() {
  return <div>Current direction: {useDirection()}</div>;
}