RTL Setup

Many applications need to support both Left-to-Right (LTR) and Right-to-Left (RTL) layouts to accommodate different language audiences, such as Arabic or Persian.

HextaUI uses @radix-ui/react-direction to easily toggle layout direction using React context. This guide walks you through installation, usage, and integration inside your components.

Installation

pnpm add @radix-ui/react-direction
# or
npm install @radix-ui/react-direction
# or
yarn add @radix-ui/react-direction

Usage Example

"use client";

import { useState } from "react";
import { DirectionProvider } from "@radix-ui/react-direction";

interface PreviewContainerProps {
  children: React.ReactNode;
  className?: string;
}

export const Layout = ({ children }) => {
  const [direction, setDirection] = useState<"ltr" | "rtl">("ltr");

  const toggleDirection = () =>
    setDirection((prev) => (prev === "ltr" ? "rtl" : "ltr"));

  return (
    <DirectionProvider dir={direction}>
      <div dir={direction}>
        <header>
            <button onClick={toggleDirection}>
                {direction}
            </button>
        </header>
        <div>
            {children}
        </div>
      </div>
    </DirectionProvider>
  );
};

Tips for RTL Support

Logical TailwindCSS Utilities

Replace directional utility classes (left-, right-, ml-, etc.) with logical CSS equivalents. This ensures the layout automatically adjusts based on the dir attribute (ltr or rtl), without needing extra logic. Conversion reference is down

rtl: Prefix for Direction-Specific Styles

Tailwind allows you to scope styles to specific directions using the rtl: and ltr: prefixes.

// Example: Flip an icon in RTL
<ChevronRightIcon className="size-4 rtl:rotate-180" />

• In LTR: ➡️

• In RTL: ⬅️ (rotated automatically)

Detect Direction in JS

Sometimes, CSS alone is not enough—like changing logic, labels, or interaction patterns based on the current direction. For these cases, use the useDirection() hook from @radix-ui/react-direction to access the current direction ("ltr" or "rtl").