> ## Documentation Index
> Fetch the complete documentation index at: https://mintlify.com/mui/base-ui/llms.txt
> Use this file to discover all available pages before exploring further.

# Direction Provider

> API reference for the DirectionProvider component

## DirectionProvider

Enables RTL (right-to-left) behavior for Base UI components.

## Import

```tsx theme={null}
import { DirectionProvider, useDirection } from '@base-ui/react/direction-provider';
import type { TextDirection } from '@base-ui/react/direction-provider';
```

## Component Signature

```tsx theme={null}
const DirectionProvider: React.FC<DirectionProvider.Props>
```

## Props

<ParamField path="children" type="React.ReactNode">
  The content to be wrapped by the direction provider.
</ParamField>

<ParamField path="direction" type="TextDirection | undefined" default="'ltr'">
  The reading direction of the text. Can be `'ltr'` (left-to-right) or `'rtl'` (right-to-left).
</ParamField>

## Type Definitions

### DirectionProvider.Props

```tsx theme={null}
interface DirectionProviderProps {
  children?: React.ReactNode;
  direction?: TextDirection | undefined;
}
```

### TextDirection

```tsx theme={null}
type TextDirection = 'ltr' | 'rtl';
```

## useDirection Hook

A hook to access the current text direction from context.

### Signature

```tsx theme={null}
function useDirection(): TextDirection
```

### Return Value

Returns the current text direction (`'ltr'` or `'rtl'`). Defaults to `'ltr'` if used outside a DirectionProvider.

## Usage Example

```tsx theme={null}
import { DirectionProvider, useDirection } from '@base-ui/react/direction-provider';

function MyComponent() {
  const direction = useDirection();
  return <div dir={direction}>Content</div>;
}

function App() {
  return (
    <DirectionProvider direction="rtl">
      <MyComponent />
    </DirectionProvider>
  );
}
```

## Related

* [Direction Provider Guide](/utilities/direction-provider)