DirectionProvider — Frontfriend

Interactive preview

Rendered from the shared Frontfriend stories with React Base, the same preview Studio shows. Styling comes from your Design System; the code below is native to Reka UI.

Installation

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

pnpm exec frontfriend download direction -f vue --primitive reka

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

Usage

<script setup lang="ts">
import { DirectionProvider } from "@/components/ui/direction";
import { Slider } from "@/components/ui/slider";

const args = {
  "direction": "ltr",
} satisfies Partial<
  InstanceType<typeof DirectionProvider> extends { $props: infer Props }
    ? Props
    : {}
> &
  Record<string, unknown> & { direction?: "ltr" | "rtl" };
</script>

<template>
  <DirectionProvider :direction="args.direction"
    ><div :dir="args.direction" class="w-[280px] space-y-4 py-6">
      <p>Reading direction: {{ args.direction }}</p>
      <Slider
        :key="args.direction"
        :default-value="[25]"
        :max="100"
        :step="1"
        aria-label="Direction example"
      /></div
  ></DirectionProvider>
</template>

Examples

Default

<script setup lang="ts">
import { DirectionProvider } from "@/components/ui/direction";
import { Slider } from "@/components/ui/slider";

const args = {

} satisfies Partial<
  InstanceType<typeof DirectionProvider> extends { $props: infer Props }
    ? Props
    : {}
> &
  Record<string, unknown>;
</script>

<template>
  <div class="flex flex-col gap-8 py-6 sm:flex-row">
    <DirectionProvider direction="ltr">
      <div dir="ltr" class="flex w-[280px] flex-col gap-2">
        <span class="text-xs font-medium uppercase tracking-wide">ltr</span>
        <Slider :default-value="[25]" :max="100" :step="1" class="w-full" />
      </div>
    </DirectionProvider>
    <DirectionProvider direction="rtl">
      <div dir="rtl" class="flex w-[280px] flex-col gap-2">
        <span class="text-xs font-medium uppercase tracking-wide">rtl</span>
        <Slider :default-value="[25]" :max="100" :step="1" class="w-full" />
      </div>
    </DirectionProvider>
  </div>
</template>

Right To Left

<script setup lang="ts">
import { DirectionProvider } from "@/components/ui/direction";
import { Slider } from "@/components/ui/slider";

const args = {

} satisfies Partial<
  InstanceType<typeof DirectionProvider> extends { $props: infer Props }
    ? Props
    : {}
> &
  Record<string, unknown>;
</script>

<template>
  <DirectionProvider direction="rtl">
    <div dir="rtl" class="w-[320px] py-6">
      <Slider :default-value="[25]" :max="100" :step="1" class="w-full" />
    </div>
  </DirectionProvider>
</template>

API reference

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

Prop	Type	Default	Description
`direction`	`"ltr" \| "rtl"`	`"ltr"`

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