Direction Provider

Enables RTL behavior for Base UI components.

import { DirectionProvider } from '@base-ui-components/react/direction-provider';
import { Slider } from '@base-ui-components/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-components/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

direction

TextDirection

'ltr'

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

children

ReactNode

—

Name: children
Type: React.ReactNode

useDirection

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

Return value

direction

TextDirection

'ltr'

Name: direction
Description: The current text direction.
Type: 'ltr' | 'rtl' | undefined
Default: 'ltr'