Direction Provider

Enables RTL behavior for Base UI components.

import { DirectionProvider } from '@base-ui/react/direction-provider';
import { Slider } from '@base-ui/react/slider';
import styles from './index.module.css';

export default function ExampleDirectionProvider() {
  return (
    <div dir="rtl">
      <DirectionProvider direction="rtl">
        <Slider.Root defaultValue={25}>
          <Slider.Control className={styles.Control}>
            <Slider.Track className={styles.Track}>
              <Slider.Indicator className={styles.Indicator} />
              <Slider.Thumb className={styles.Thumb} />
            </Slider.Track>
          </Slider.Control>
        </Slider.Root>
      </DirectionProvider>
    </div>
  );
}

Anatomy

Import the component and wrap it around your app:

Anatomy

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

<DirectionProvider>
  {/* Your app or a group of components */}
</DirectionProvider>

<DirectionProvider> enables child Base UI components to adjust behavior based on RTL text direction, but does not affect HTML and CSS. The dir="rtl" HTML attribute or direction: rtl CSS style must be set additionally by your own application code.

API reference

DirectionProvider

Enables RTL behavior for Base UI components.

directionTextDirection'ltr'

Name: direction
Description: The reading direction of the text
Type: TextDirection | undefined
Default: 'ltr'

childrenReact.ReactNode—

Name: children
Type: React.ReactNode | undefined

DirectionProvider.PropsHide

Re-Export of DirectionProvider props as DirectionProviderProps

DirectionProvider.StateHide

type DirectionProviderState = {}

useDirection

Use this hook to read the current text direction. This is useful for wrapping portaled components that may be rendered outside your application root and are unaffected by the dir attribute set within.

Return value

TextDirection

TextDirectionHide

type TextDirection = 'ltr' | 'rtl'