Direction

Provides reading-direction (LTR/RTL) context to Radix-based atomx components, built on Radix UI's DirectionProvider.

Install

npx shadcn@latest add https://atomx.acau.net/r/direction.json

Usage

Radix-based components (menus, sliders, tabs, and others) read a reading direction from React context to decide which way arrow-key navigation and side-aware positioning should flow. By default they fall back to "ltr". Wrap your app — or any subtree — in DirectionProvider to supply "rtl" for right-to-left locales.

Use it once near the root of a localized app. Reach for the useDirection hook inside a custom component when you need to branch on the current direction yourself.

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

export function App({ children }: { children: React.ReactNode }) {
  return <DirectionProvider dir="rtl">{children}</DirectionProvider>
}

useDirection reads the nearest provider's value:

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

function Caret() {
  const dir = useDirection() // "ltr" | "rtl"
  return <span>{dir === "rtl" ? "←" : "→"}</span>
}

Preview

DirectionProvider renders no markup of its own — it only supplies context. The example below also sets the HTML dir attribute so the change is visible; toggle it to see content flow reverse.

Props