---
id: "packages/active-ui/direction"
title: "Direction"
description: "Tells the components the reading direction, so a right-to-left page gets the right keyboard behaviour."
url: "/packages/active-ui/direction"
locale: "en"
revision: "9703b214a5b1b82f"
---

# Direction

`DirectionProvider` tells the components inside it whether text runs left to right or right to
left. The `dir` attribute on an element turns the layout around; the provider adds what CSS cannot:
which way the arrow keys move in tabs, sliders, menus and toggle groups. Use both together for a
right-to-left language such as Arabic or Hebrew. It is Base UI's direction provider, passed
through.

**Example: Left to right and right to left**

Client: Runs entirely in your browser. Source: `examples/ui/direction.tsx`.

```tsx
// apps/docs/examples/ui/direction.tsx
'use client';

import {useState} from 'react';

import {DirectionProvider} from '@workspace/active-ui/components/primitives/direction';
import {Slider} from '@workspace/active-ui/components/primitives/slider';
import {
  Tabs,
  TabsList,
  TabsTrigger,
} from '@workspace/active-ui/components/primitives/tabs';

/**
 * The same tabs and slider left to right and right to left. The `dir`
 * attribute turns the layout around; `DirectionProvider` tells the
 * components, so the arrow keys follow the reading direction.
 */
export default function DirectionExample() {
  const [direction, setDirection] = useState<'ltr' | 'rtl'>('rtl');
  return (
    <div className="flex w-full max-w-sm flex-col gap-4">
      <Tabs
        value={direction}
        onValueChange={(value) => setDirection(value as 'ltr' | 'rtl')}
      >
        <TabsList aria-label="Reading direction">
          <TabsTrigger value="ltr">Left to right</TabsTrigger>
          <TabsTrigger value="rtl">Right to left</TabsTrigger>
        </TabsList>
      </Tabs>
      <DirectionProvider direction={direction}>
        <div
          dir={direction}
          className="flex flex-col gap-4 rounded-lg border p-4"
        >
          <Tabs defaultValue="one">
            <TabsList aria-label="Steps">
              <TabsTrigger value="one">One</TabsTrigger>
              <TabsTrigger value="two">Two</TabsTrigger>
              <TabsTrigger value="three">Three</TabsTrigger>
            </TabsList>
          </Tabs>
          <Slider defaultValue={30} aria-label="Share" />
        </div>
      </DirectionProvider>
    </div>
  );
}
```

## Usage

```tsx
import {DirectionProvider} from '@workspace/active-ui/components/primitives/direction';

<html dir="rtl">
  <body>
    <DirectionProvider direction="rtl">{app}</DirectionProvider>
  </body>
</html>;
```

## What your application provides

- The direction of your reader's language, on the `dir` attribute of `<html>` (or of the part of
  the page in that language) and on the provider.
- `useDirection()` returns the current direction, for a component of your own that needs it.

Components that format numbers and dates take the language from you as well; see
[active-format](/packages/active-format).

## API

**DirectionProvider**

| Prop | Type | Required | Description |
| --- | --- | --- | --- |
| `children` | `ReactNode` | no |  |
| `direction` | `TextDirection` | no | The reading direction of the text |

**useDirection**: `() => TextDirection`