# Direction
A provider component that sets the text direction for your application.
## Installation
```bash
npx shadcn@latest add https://reactdocs.canceydejean.dev/r/direction.json
```
[Registry JSON](https://reactdocs.canceydejean.dev/r/direction.json)
## Preview
```tsx
import { useState } from "react";
import { Button } from "@/components/ui/button";
import { DirectionProvider, useDirection, type TextDirection } from "@/components/ui/direction/direction";
function DirectionReadout() {
const direction = useDirection();
return (
);
}
```
## Source
### direction.tsx
```tsx
"use client";
export {
DirectionProvider,
useDirection,
type DirectionProviderProps,
type TextDirection,
} from "@base-ui/react/direction-provider";
```
## Usage
Sets text direction (`ltr` or `rtl`) for Base UI components. Essential for right-to-left languages
such as Arabic, Hebrew, and Persian. Built on
[Base UI Direction Provider](https://base-ui.com/react/utils/direction-provider). Also set
`dir` on the document root for browser layout.
```tsx
import { DirectionProvider } from "@/components/direction/direction";
{/* Your app content */}
;
```
### useDirection
```tsx
import { useDirection } from "@/components/ui/direction";
export function Example() {
return