Direction

Re-exports Base UI's DirectionProvider and useDirection for managing layout direction. Wrap your app or a subtree in DirectionProvider to set a consistent dir value, and read it from any descendant with the useDirection hook.

Anatomy

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

<DirectionProvider direction="rtl">
  {/* All children will use RTL layout */}
</DirectionProvider>

Examples

RTL layout

Wrap a subtree in DirectionProvider to force right-to-left rendering for all child components.

<DirectionProvider direction="rtl">
  <Input placeholder="Search..." />
  <DropdownMenu>
    <DropdownMenuTrigger>Options</DropdownMenuTrigger>
    <DropdownMenuContent>
      <DropdownMenuItem>Settings</DropdownMenuItem>
    </DropdownMenuContent>
  </DropdownMenu>
</DirectionProvider>

Reading direction from a hook

Use useDirection inside a component to read the current direction and adapt rendering logic.

function BidiIcon() {
  const direction = useDirection()
  return direction === "rtl" ? <ArrowLeftIcon /> : <ArrowRightIcon />
}

API Reference

DirectionProvider

A context provider that sets the text/layout direction for its subtree. Re-exported from @base-ui/react/direction-provider.

useDirection

A hook that returns the current direction ("ltr" or "rtl") from the nearest DirectionProvider. Returns "ltr" if no provider is found.

const direction = useDirection() // "ltr" | "rtl"