Direction Provider

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 aria-label="Volume" className={styles.Thumb} />
            </Slider.Track>
          </Slider.Control>
        </Slider.Root>
      </DirectionProvider>
    </div>
  );
}

Anatomy

Import the component and wrap it around your app:

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.

Stencil API

<div dir="rtl">
  <fs-direction-provider-root direction="rtl">
    <fs-slider-root default-value="25"><!-- Slider parts --></fs-slider-root>
  </fs-direction-provider-root>
</div>

Import finesoft-components/direction-provider for automatic registration, or register with defineCustomElements() from finesoft-components/define-custom-elements.

direction accepts "ltr" or "rtl" and defaults to "ltr". It changes component behavior without setting the HTML dir attribute. Set dir separately when the layout should also change. Nested providers replace the outer direction, including when the inner provider uses the default. Portals inherit the provider at their declaration site.

import { useDirection } from 'finesoft-components/direction-provider';
const direction = useDirection(element);

In Stencil, useDirection(element) is a DOM utility and requires an element in the relevant subtree. It returns "ltr" when no provider exists. Already migrated components also retain their existing HTML/CSS dir shorthand when no provider is present; an explicit provider takes precedence. Dynamic provider updates refresh component behavior and popup positioning.

API reference

DirectionProvider

Enables RTL behavior for Base UI components.

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.

TextDirection

type TextDirection = 'ltr' | 'rtl'