---
title: Direction
description: A provider component that sets the text direction for your application.
base: base
component: true
links:
doc: https://base-ui.com/react/utils/direction-provider
api: https://base-ui.com/react/utils/direction-provider#api-reference
---
The `DirectionProvider` component is used to set the text direction (`ltr` or `rtl`) for your application. This is essential for supporting right-to-left languages like Arabic, Hebrew, and Persian.
Here's a preview of the component in RTL mode. Use the language selector to switch the language. To see more examples, look for the RTL section on components pages.
## Installation
Command
Manual
```bash
npx shadcn@latest add direction
```
Install the following dependencies:
```bash
npm install @base-ui/react
```
Copy and paste the following code into your project.
Update the import paths to match your project setup.
## Usage
```tsx showLineNumbers
import { DirectionProvider } from "@/components/ui/direction"
```
```tsx showLineNumbers
{/* Your app content */}
```
## useDirection
The `useDirection` hook is used to get the current direction of the application.
```tsx showLineNumbers
import { useDirection } from "@/components/ui/direction"
function MyComponent() {
const direction = useDirection()
return Current direction: {direction}
}
```