Direction
Right-to-left behavior for keyboard and popups, separate from the theme.
Base UI DirectionProvider reference ↗Installation
Run it from the root of a project already set up with zunoui init.
npx zunoui@latest add directionDependencies
What add direction installs alongside the component. The CLI skips any you already have in a compatible version.
ZUNO registry
@zuno/utils
npm
@base-ui/[email protected]
Examples
1 examples · 1 componentRight to left
Tabs and a slider in RTL: the first tab sits on the right and Left moves forward.
API reference
Keeps the props of Base UI DirectionProvider, plus ZUNO's styles; the table lists the ones you use most.
| Prop | Type | Default |
|---|---|---|
directionReading direction Base UI components follow for arrow keys and popup sides. | "ltr" | "rtl" | "ltr" |
useDirection()Returns the current direction, for your own components. | hook | — |
Accessibility
Set dir on <html> (or the subtree) too: the provider only informs Base UI behavior, while dir drives the layout, text order and what screen readers announce.
With rtl, arrow keys follow what people see: in Tabs, RadioGroup, ToggleGroup and Slider, Left moves toward the end.
Pair dir with a matching lang so screen readers pick the right voice.
ZUNO styles use logical properties (ps-*, ms-*, start/end), so spacing and icons mirror without extra classes.