Direction Provider

Direction provider configures RTL/LTR for part of or the whole app

Installation

Base UI components are all available as a single package.

npm install @base-ui-components/react

Once you have the package installed, import the component.

import { DirectionProvider } from '@base-ui-components/react/direction-provider';

Use DirectionProvider to configure RTL keyboard behavior for an app or a group of components:

<html dir="rtl">
  <body>
    <DirectionProvider direction="rtl">{/* Your React app */}</DirectionProvider>
  </body>
</html>

Additionally, you must set the dir="rtl" attribute in your HTML to affect styling.

A provider that configures RTL/LTR behavior for part of an app or a whole app.

Prop	Type	Default	Description
`direction`	`enum`	`'ltr'`	The reading direction of the text