Direction Provider

Sets LTR or RTL direction.

السطوع

<script setup lang="ts">
import { DirectionProvider } from '@shardsui/vue/direction-provider'
import { Slider } from '@shardsui/vue/slider'
</script>

<template>
  <div dir="rtl">
    <DirectionProvider direction="rtl">
      <Slider.Root :value="40" class="w-56">
        <div class="flex items-center justify-between">
          <Slider.Label class="text-sm font-medium text-gray-900 select-none">السطوع</Slider.Label>
          <Slider.Value class="text-sm text-gray-600 select-none" />
        </div>
        <Slider.Control class="flex w-full touch-none items-center py-3 select-none">
          <Slider.Track
            class="h-1 w-full rounded-sm bg-gray-50 inset-ring inset-ring-gray-200 select-none"
          >
            <Slider.Indicator class="rounded-sm bg-gray-700 select-none" />
            <Slider.Thumb
              class="size-4 rounded-full bg-gray-50 outline-1 outline-gray-300 select-none has-focus-visible:outline-2 has-focus-visible:outline-gray-950"
            />
          </Slider.Track>
        </Slider.Control>
      </Slider.Root>
    </DirectionProvider>
  </div>
</template>

Anatomy

<script setup>
import { DirectionProvider } from '@shardsui/vue/direction-provider'
</script>

<template>
  <DirectionProvider>
    <!-- Your app or a group of components -->
  </DirectionProvider>
</template>

With direction="rtl", the ShardsUI components inside lay out and navigate for right-to-left reading. The provider changes component behavior only — it never touches the DOM's own direction, so flip the text yourself with dir="rtl" on an element or direction: rtl in CSS.

API reference

DirectionProvider

Doesn't render its own HTML element.

Prop	Type	Default
`direction`	`TextDirection`	`'ltr'`

`default`	`Slot`	—

getDirection

Read the current text direction. Useful for portaled content, which renders outside your app root and so escapes a surrounding dir attribute.

<script setup>
import { getDirection } from '@shardsui/vue/direction-provider'

const direction = getDirection()
</script>

<template>
  <Popover.Portal>
    <Popover.Positioner>
      <Popover.Popup :dir="direction">...</Popover.Popup>
    </Popover.Positioner>
  </Popover.Portal>
</template>

Call it in <script setup>: it returns a readonly ref that stays live, so read direction.value in script and direction in the template. Reading .value once during setup keeps whatever direction was active at initialization.

Return value

type ReturnValue = Readonly<Ref<TextDirection>>

Additional types

TextDirection

type TextDirection = 'ltr' | 'rtl'