Component

DirectionProvider

Sets the reading direction once for every Rad UI component inside, so right-to-left apps don't pass dir to each one.

preview

المحتوى الأول

React
"use client"

import DirectionProvider from "@radui/ui/DirectionProvider"
import Tabs from "@radui/ui/Tabs"

// Arrow keys move right-to-left here: ArrowLeft goes to the next tab.
export default function DirectionProviderExample() {
    return (
        <DirectionProvider dir="rtl">
            <div dir="rtl">
                <Tabs.Root defaultValue="one">
                    <Tabs.List>
                        <Tabs.Trigger value="one">الأول</Tabs.Trigger>
                        <Tabs.Trigger value="two">الثاني</Tabs.Trigger>
                        <Tabs.Trigger value="three">الثالث</Tabs.Trigger>
                    </Tabs.List>
                    <Tabs.Content value="one">المحتوى الأول</Tabs.Content>
                    <Tabs.Content value="two">المحتوى الثاني</Tabs.Content>
                    <Tabs.Content value="three">المحتوى الثالث</Tabs.Content>
                </Tabs.Root>
            </div>
        </DirectionProvider>
    )
}

Features

One wrapper sets right-to-left keyboard navigation for every component inside
Covers Tabs, TabNav, ToggleGroup, Toolbar, RadioGroup, CheckboxGroup, Accordion, menus, Menubar, NavigationMenu, Splitter, Slider, Select and Combobox
A component's own dir prop still wins
useDirection reads it in your own components

API Documentation

Anatomy

Import all parts of the component and piece them together

React
import DirectionProvider from "@radui/ui/DirectionProvider"

export default () => {
    return (
        <DirectionProvider dir="rtl">
            {/* your app */}
        </DirectionProvider>
    )
}

Provider

Provides the direction. It renders no element: set dir on <html> as well so text and CSS follow. A component's own dir prop still wins.

Prop	Type	Default
dir	'ltr' \| 'rtl'	--
children	ReactNode	--

Keyboard Interactions

Shortcut	Description
`ArrowLeft`	In rtl, moves to the next item in horizontal components.
`ArrowRight`	In rtl, moves to the previous item in horizontal components.

ARIA References

Reference	What Rad UI follows
Tabs pattern	Horizontal arrow keys follow the reading direction, as the APG patterns require for right-to-left languages.