Components

Direction

Sets left-to-right or right-to-left reading for every component inside it.

Text reference

npx -y github:anwarlemu/opencommerce-brand-cli#release add direction --surface site

Run from the target React 19.2+ app root with Tailwind CSS 4 and the @/* source alias. Source and examples as JSON.

direction.preview

الطلبات

Usage

use-it-for.md

Wrap a right-to-left region (Arabic or Hebrew content) in DirectionProvider with dir="rtl", and set dir on the element too, so menus, sliders and tabs flip.

avoid.md

Mirroring a layout with CSS alone
Mixing directions inside one form

Exports: DirectionProvider, useDirection. This component includes a client boundary. Keep event handlers and state in a client component.

Dependencies: @radix-ui/react-direction.

Example

examples/direction.tsx

"use client";

import { DirectionProvider } from "@/components/ui/direction";
import { Slider } from "@/components/ui/slider";
import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group";

export function Site() {
  return (
    <DirectionProvider dir="rtl">
      <div dir="rtl" className="grid max-w-110 gap-4 font-sans text-body-sm text-fg">
        <p>الطلبات</p>
        <ToggleGroup type="single" defaultValue="live" aria-label="الحالة">
          <ToggleGroupItem value="live">مباشر</ToggleGroupItem>
          <ToggleGroupItem value="failed">فشل</ToggleGroupItem>
          <ToggleGroupItem value="all">الكل</ToggleGroupItem>
        </ToggleGroup>
        <Slider defaultValue={[30]} aria-label="الميزانية" />
      </div>
    </DirectionProvider>
  );
}

Source

components/ui/direction.tsx

"use client";

import * as React from "react";
import * as DirectionPrimitive from "@radix-ui/react-direction";

// Sets the reading direction (ltr or rtl) for every Radix-based component inside it, so menus, sliders and tabs flip
// for right-to-left text. It renders nothing of its own; set dir on the element you wrap too.
function DirectionProvider({ dir, direction, children }: React.ComponentProps<typeof DirectionPrimitive.DirectionProvider> & { direction?: React.ComponentProps<typeof DirectionPrimitive.DirectionProvider>["dir"] }) {
  return <DirectionPrimitive.DirectionProvider dir={direction ?? dir}>{children}</DirectionPrimitive.DirectionProvider>;
}

const useDirection = DirectionPrimitive.useDirection;

export { DirectionProvider, useDirection };

Reference: Extrapolated from opencommerce (no visible part).