Direction

Tells the components which way text runs, for right-to-left pages: Base UI's DirectionProvider, under zeroUI's name.

Install

terminal

# once per project: where @zeroui items come frompnpm dlx shadcn@latest registry add @zeroui=https://zeroui.catforest.dev/r/{name}.jsonpnpm dlx shadcn@latest add @zeroui/direction

Examples

Tabs, right to left

Right to left: the tabs run from the right, and the arrow keys follow.

direction-rtl.tsx

import { DirectionProvider } from "@/components/zero/direction";import { Tabs, TabsList, TabsTab } from "@/components/zero/tabs";export default function DirectionRtl() {  return (    <div dir="rtl" className="grid justify-items-start gap-3">      <DirectionProvider direction="rtl">        <Tabs defaultValue="board">          <TabsList>            <TabsTab value="board">Board</TabsTab>            <TabsTab value="map">Map</TabsTab>            <TabsTab value="drivers">Drivers</TabsTab>          </TabsList>        </Tabs>      </DirectionProvider>      <p        dir="ltr"        className="font-medium font-zero-text text-zero-sm text-zero-text-3"      >        Right to left: the tabs run from the right, and the arrow keys follow.      </p>    </div>  );}

Behaviour

Arrow keys in menus, tabs, sliders and the like follow the direction, and popups line up from the right. Set dir on the page (or the element) as well.

The slant does not mirror: every cut leans the same way in any language, since the lean belongs to the look, like the italic.

Props

DirectionProvider

Prop	Type	Default	Description
direction	"ltr" \| "rtl"	"ltr"	Which way text runs inside it.

Also takes every prop of Base UI's DirectionProvider.