Direction

Provides text-direction (LTR/RTL) context to descendant components.

$bunx shadcn@latest add @nx-ui/direction
Registry item

Left-to-right vs right-to-left

DirectionProvider tells every nested Base UI component (Select, Tabs, Slider…) which way is 'start' and which is 'end' — it renders nothing itself.

ltr
rtl

useDirection()

Any descendant can read the current direction back out — flip the switch to re-render the panel below in the opposite direction.

useDirection() → "ltr"
Arrow-key navigation between tabs and the select's open side both honour the current direction — try Left/Right on the tab list.

Nested overrides

Providers nest: an inner DirectionProvider overrides its ancestor's direction for its own subtree only, useful for embedding a right-to-left locale's panel inside an otherwise left-to-right page.

Fleet dashboard (ltr)useDirection() → "ltr"
لوحة السائقuseDirection() → "rtl"

Realistic composition

A collection-route summary card rendered inside an RTL provider, composed entirely from ordinary Nexus components that pick up the direction automatically.

مسار جمع النفايات
نشط
المنطقة الصناعية — محطة النقل الشرقية
السعة المستخدمة