# Direction

A provider component that sets the text direction for your application.

## When to use

* Set right-to-left direction for an app in Arabic, Hebrew or Persian.
* Make the primitives, such as sliders and menus, follow that direction.

## How it works

Exports: `DirectionProvider` and `useDirection`. With Base UI it re-exports `DirectionProvider` from `@base-ui/react/direction-provider`; with Radix it wraps `Direction.DirectionProvider` from `radix-ui` and accepts `direction` as well as `dir`. The provider tells the primitives the direction; you still set `dir` on the HTML. The official example depends on a language selector of the shadcn site, so this demo is our own: a slider in `rtl`.

## Example

### Base UI

```tsx
'use client'

// The official example depends on a language selector of the shadcn site, so this demo is our own.
import { DirectionProvider } from "@/shadcn/base/ui/direction"
import { Slider } from "@/shadcn/base/ui/slider"

export default function DirectionDemo() {
  return (
    <DirectionProvider direction="rtl">
      <div dir="rtl" className="mx-auto w-full max-w-xs">
        <Slider defaultValue={[75]} max={100} step={1} />
      </div>
    </DirectionProvider>
  )
}
```

```tsx [components/ui/direction.tsx]
"use client"

export {
  DirectionProvider,
  useDirection,
} from "@base-ui/react/direction-provider"
```

### Radix

```tsx
'use client'

// The official example depends on a language selector of the shadcn site, so this demo is our own.
import { DirectionProvider } from "@/shadcn/radix/ui/direction"
import { Slider } from "@/shadcn/radix/ui/slider"

export default function DirectionDemo() {
  return (
    <DirectionProvider direction="rtl">
      <div dir="rtl" className="mx-auto w-full max-w-xs">
        <Slider defaultValue={[75]} max={100} step={1} />
      </div>
    </DirectionProvider>
  )
}
```

```tsx [components/ui/direction.tsx]
"use client"

import * as React from "react"
import { Direction } from "radix-ui"

function DirectionProvider({
  dir,
  direction,
  children,
}: React.ComponentProps<typeof Direction.DirectionProvider> & {
  direction?: React.ComponentProps<typeof Direction.DirectionProvider>["dir"]
}) {
  return (
    <Direction.DirectionProvider dir={direction ?? dir}>
      {children}
    </Direction.DirectionProvider>
  )
}

const useDirection = Direction.useDirection

export { DirectionProvider, useDirection }
```

## Installation

```bash
npx shadcn@latest add direction
```

## Reference

Official page: https://ui.shadcn.com/docs/components/direction