Direction

A provider for setting text direction (LTR/RTL) on child content.

Hello, World! مرحبا بالعالم

dir

ltr

rtl

#Installation

bunx --bun barefoot add direction

#Usage

This content will be right-to-left.

1import { DirectionProvider } from "@/components/ui/direction"23function DirectionDemo() {4  return (5    <DirectionProvider dir="rtl">6      <p>This content will be right-to-left.</p>7    </DirectionProvider>8  )9}

#Examples

#Basic

Left-to-Right (LTR)

This text flows from left to right. Numbers like 123 appear naturally.

Right-to-Left (RTL)

هذا النص يتدفق من اليمين إلى اليسار. الأرقام مثل 123 تظهر بشكل طبيعي.

1import { DirectionProvider } from "@/components/ui/direction"23function BasicExample() {4  return (5    <div className="flex flex-col gap-4">6      <DirectionProvider dir="ltr">7        <div className="rounded-md border p-4">8          <p>Left-to-Right (LTR)</p>9          <p>This text flows from left to right.</p>10        </div>11      </DirectionProvider>12      <DirectionProvider dir="rtl">13        <div className="rounded-md border p-4">14          <p>Right-to-Left (RTL)</p>15          <p>هذا النص يتدفق من اليمين إلى اليسار.</p>16        </div>17      </DirectionProvider>18    </div>19  )20}

#Nested

محتوى RTL خارجي

هذا القسم يستخدم اتجاه من اليمين إلى اليسار.

Nested LTR content

This section overrides to left-to-right inside an RTL parent.

1import { DirectionProvider } from "@/components/ui/direction"23function NestedExample() {4  return (5    <DirectionProvider dir="rtl">6      <div className="rounded-md border p-4">7        <p>محتوى RTL خارجي</p>8        <DirectionProvider dir="ltr">9          <div className="rounded-md border p-3">10            <p>Nested LTR content</p>11          </div>12        </DirectionProvider>13      </div>14    </DirectionProvider>15  )16}

#Form

نموذج تسجيل

الاسم

البريد الإلكتروني

1import { DirectionProvider } from "@/components/ui/direction"23function FormExample() {4  return (5    <DirectionProvider dir="rtl">6      <div className="rounded-md border p-4 space-y-3">7        <h4>نموذج تسجيل</h4>8        <div className="grid gap-1.5">9          <label>الاسم</label>10          <input type="text" placeholder="أدخل اسمك" />11        </div>12        <div className="grid gap-1.5">13          <label>البريد الإلكتروني</label>14          <input type="email" placeholder="أدخل بريدك الإلكتروني" />15        </div>16      </div>17    </DirectionProvider>18  )19}

#API Reference

Prop	Type	Default	Description
dir	"ltr" \| "rtl"	"ltr"	The text direction for child content.
className	string	-	Additional CSS class names.
children	Child	-	Content to render within the direction context.