# Direction
Tells the Base UI components that the interface reads right to left.
```tsx
import { DirectionProvider } from "@zenoxai/ui/components/direction"
import { Slider } from "@zenoxai/ui/components/slider"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@zenoxai/ui/components/tabs"
function DirectionDemo() {
return (
Open
Resolved
Dismissed
Alerts waiting for triage
Alerts closed in the last 90 days
Alerts marked as false positives
Risk score threshold
)
}
```
## Usage
```tsx
import { DirectionProvider } from "@zenoxai/ui/components/direction"
```
```tsx
```
An RTL interface needs two things, and they do different jobs:
- The `dir="rtl"` attribute on `` (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](/components/pagination) and [Breadcrumb](/components/breadcrumb).
- `DirectionProvider` tells the Base UI components, which cannot read the attribute, to
reverse their logic: Left and Right arrow keys in [Tabs](/components/tabs) and menus, the
fill and keyboard of the [Slider](/components/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](https://base-ui.com/react/utils/direction-provider) in the Base UI
documentation.
## Accessibility
- Set `lang` next to `dir` (``) so screen readers choose the
right voice and pronunciation. `dir` alone does not change the language.
## API reference
`import { ... } from "@zenoxai/ui/components/direction"`
### DirectionProvider
| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| direction | `"ltr" \| "rtl"` | `'ltr'` | The reading direction of the text |