DirectionProvider

Installation

Complete project setup first. Your configuration must select react/base and include your Design System ID.

pnpm exec frontfriend download direction -f react --primitive base

Review dependencies reported by the downloader and keep your source changes in version control.

Usage

import { DirectionProvider } from "@/components/ui/direction";
import { Slider } from "@/components/ui/slider";
<DirectionProvider direction="ltr">
  <div dir="ltr" className="w-[280px] space-y-4 py-6">
    <p>Reading direction: {"ltr"}</p>
    <Slider
      key="ltr"
      defaultValue={[25]}
      max={100}
      step={1}
      aria-label="Direction example"
    />
  </div>
</DirectionProvider>;

Examples

Default

import { DirectionProvider } from "@/components/ui/direction";
import { Slider } from "@/components/ui/slider";
<div className="flex flex-col gap-8 py-6 sm:flex-row">
  {(["ltr", "rtl"] as const).map((direction) => (
    <DirectionProvider key={direction} direction={direction}>
      <div dir={direction} className="flex w-[280px] flex-col gap-2">
        <span className="text-xs font-medium uppercase tracking-wide">
          {direction}
        </span>
        <Slider defaultValue={[25]} max={100} step={1} className="w-full" />
      </div>
    </DirectionProvider>
  ))}
</div>;

Right To Left

import { DirectionProvider } from "@/components/ui/direction";
import { Slider } from "@/components/ui/slider";
<DirectionProvider direction="rtl">
  <div dir="rtl" className="w-[320px] py-6">
    <Slider defaultValue={[25]} max={100} step={1} className="w-full" />
  </div>
</DirectionProvider>;

API reference

Frontfriend-owned props. Native HTML and inherited primitive props remain documented by Base UI.

Configuration determines the actual classes and available styling hooks. See Theming & component configuration before introducing a repeated local override.