Direction Provider

Enables RTL behavior for Base UI components.

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

export default function ExampleDirectionProvider() {
  return (
    <div dir="rtl">
      <DirectionProvider direction="rtl">
        <Slider.Root defaultValue={25}>
          <Slider.Control class={styles.Control}>
            <Slider.Track class={styles.Track}>
              <Slider.Indicator class={styles.Indicator} />
              <Slider.Thumb aria-label="Volume" class={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-solid/direction-provider';

// prettier-ignore
<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.

Prop

Type

Default

directionTextDirection'ltr'

The reading direction of the textTextDirection

childrenJSX.Element—

-JSX.Element

useDirection

Use this hook to read the current text direction. In Solid it returns an accessor, so call direction() in a reactive scope. 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

type ReturnValue = Accessor<TextDirection>;

TextDirection

type TextDirection = 'ltr' | 'rtl';