Direction

Re-exports the Base UI DirectionProvider for RTL support, so every SevenUI primitive below it follows right-to-left layouts.

TSX
"use client";

import { SearchIcon } from "lucide-react";

import { DirectionProvider } from "@/components/ui/direction";
import {
  InputGroup,
  InputGroupAddon,
  InputGroupInput,
} from "@/components/ui/input-group";
import { Label } from "@/components/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

Bash
Package manager:npmpnpmyarnbun
npx shadcn@latest add @sevenui/directionpnpm dlx shadcn@latest add @sevenui/directionyarn dlx shadcn@latest add @sevenui/directionbunx --bun shadcn@latest add @sevenui/direction

Usage

TSX
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

useDirection

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