Skip to content

Direction

Right-to-left support. Components use logical classes, so they mirror under dir='rtl'; the provider flips arrow keys.

Sourcecomponents/direction.tsx
اللوحة الأولى
https://
الفواتير
العميلالمبلغ
أكمي١٬٢٥٠

Usage

Direction usage
import { useState } from "react";import { DirectionProvider } from "@/components/direction";import { Tabs, TabsList, TabsTab } from "@/components/tabs";
export function DirectionUsage({ locale }: { locale: string }) {  const [tab, setTab] = useState("one");  const dir = locale.startsWith("ar") || locale.startsWith("he") ? "rtl" : "ltr";  return (    <div dir={dir}>      <DirectionProvider direction={dir}>        <Tabs value={tab} onValueChange={setTab}>          <TabsList aria-label="Steps">            <TabsTab value="one">One</TabsTab>            <TabsTab value="two">Two</TabsTab>          </TabsList>        </Tabs>      </DirectionProvider>    </div>  );}

When to use

Use when

Right-to-left content: dir="rtl" plus DirectionProvider

Don’t use when

Setting dir without the provider (arrow keys won't flip)