Radix homepage
Utilities

Direction Provider

Wraps your app to provide global reading direction.

Features

  • Enables all primitives to inherit global reading direction.

Install the component from your command line.

npm install @radix-ui/react-direction

Import the component.

import { DirectionProvider } from '@radix-ui/react-direction';
export default () => <DirectionProvider />;

When creating localized apps that require right-to-left (RTL) reading direction, you need to wrap your application with the DirectionProvider component to ensure all of the primitives adjust their behavior based on the dir prop.

PropTypeDefault
direnumNo default value

Use the direction provider.

import { DirectionProvider } from '@radix-ui/react-direction';
export default () => (
<DirectionProvider dir="rtl">{/* your app */}</DirectionProvider>
);