Direction

<div dir="rtl" className="flex w-full max-w-md flex-col gap-6">
  <DirectionProvider direction="rtl">
    <Tabs defaultValue="open">
      <TabsList variant="line">
        <TabsTrigger value="open">Open</TabsTrigger>
        <TabsTrigger value="resolved">Resolved</TabsTrigger>
        <TabsTrigger value="dismissed">Dismissed</TabsTrigger>
      </TabsList>
      <TabsContent value="open" className="pt-2 text-text-secondary">
        Alerts waiting for triage
      </TabsContent>
      <TabsContent value="resolved" className="pt-2 text-text-secondary">
        Alerts closed in the last 90 days
      </TabsContent>
      <TabsContent value="dismissed" className="pt-2 text-text-secondary">
        Alerts marked as false positives
      </TabsContent>
    </Tabs>
    <div className="flex flex-col gap-3">
      <span
        id="direction-demo-threshold"
        className="text-sm font-medium text-text-primary"
      >
        Risk score threshold
      </span>
      <Slider
        defaultValue={[70]}
        aria-labelledby="direction-demo-threshold"
      />
    </div>
  </DirectionProvider>
</div>

Usage

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

<html dir="rtl">
  <body>
    <DirectionProvider direction="rtl">
      <App />
    </DirectionProvider>
  </body>
</html>

An RTL interface needs two things, and they do different jobs:

• The dir="rtl" attribute on <html> (or on a wrapping element) flips the layout: text alignment, flex order, and the Tailwind rtl: variants that mirror icons such as the chevrons in Pagination and Breadcrumb.
• DirectionProvider tells the Base UI components, which cannot read the attribute, to reverse their logic: Left and Right arrow keys in Tabs and menus, the fill and keyboard of the Slider, and the inline-start and inline-end sides of popups.

Set both from the same locale value, at the root of the app. DirectionProvider renders no element. useDirection() returns the current direction for your own components.

See Direction Provider in the Base UI documentation.

Accessibility

• Set lang next to dir (<html lang="ar" dir="rtl">) so screen readers choose the right voice and pronunciation. dir alone does not change the language.

API reference

Generated from the TypeScript source. className, style and children are accepted everywhere and omitted below.