# DirectionProvider

Shared reading direction for LTR and RTL interfaces.

## How to use it

Use dir="rtl" for right-to-left languages. Your application must translate the content.



## Import


```tsx
import { DirectionProvider } from "@kivora/nextjs";
```


Examples run in a Client Component. Also import the hooks, icons and dependencies used. This is the web API; consult the native guide for React Native.

## Example


```tsx
<DirectionProvider dir="rtl"><div dir="rtl" style={{width:320}}><Button>مرحبا</Button><p style={{marginTop:12}}>واجهة من اليمين إلى اليسار</p></div></DirectionProvider>
```


## API: DirectionProvider


```typescript
declare function DirectionProvider({ children, className, dir }: DirectionProviderProps): React.JSX.Element;
```


| Property | Type | Required | Description |
| --- | --- | --- | --- |
| children | ReactNode | No | Content or child elements of the component. |
| className | string | No | Additional CSS classes to customize the element. |
| dir | "ltr" \| "rtl" | No | Interface reading direction. |

Source: https://kivora.pro/docs/componentes/direction-provider