Direction

Re-exports the Base UI DirectionProvider for RTL support.

"use client";

import { SearchIcon } from "lucide-react";

import { DirectionProvider } from "@/registry/base/ui/direction";
import {
  InputGroup,
  InputGroupAddon,
  InputGroupInput,
} from "@/registry/base/ui/input-group";
import { Label } from "@/registry/base/ui/label";

export default function DirectionDemo() {
  return (
    <div className="grid w-full max-w-md gap-6 sm:grid-cols-2">
      <div className="flex flex-col gap-2">
        <Label>Left to right</Label>
        <InputGroup>
          <InputGroupInput placeholder="Search..." />
          <InputGroupAddon>
            <SearchIcon />
          </InputGroupAddon>
        </InputGroup>
      </div>
      <div className="flex flex-col gap-2" dir="rtl">
        <Label>من اليمين إلى اليسار</Label>
        <DirectionProvider direction="rtl">
          <InputGroup>
            <InputGroupInput placeholder="...ابحث" />
            <InputGroupAddon>
              <SearchIcon />
            </InputGroupAddon>
          </InputGroup>
        </DirectionProvider>
      </div>
    </div>
  );
}

Installation

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

Usage

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

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

This module is a direct re-export of @base-ui/react/direction-provider. The provider makes Base UI components (menus, sliders, popovers, …) behave directionally, but it does not flip your layout: you must also set dir="rtl" (or the CSS direction) on the surrounding DOM yourself, as in the example above. Wrap it around the whole app or just the subtree that needs it.

API reference

DirectionProvider

Prop	Type	Default
`direction`	`"ltr" \| "rtl"`	`"ltr"`

useDirection

Hook returning the current text direction from the nearest provider — useful in portaled components that render outside the dir-attributed DOM subtree.