Direction Provider

Sets LTR or RTL direction.

السطوع

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

<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>

Anatomy

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

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

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'`

`children`	`Snippet`	—

getDirection

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

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

<Popover.Portal>
  <Popover.Positioner>
    <Popover.Popup dir={getDirection()}>...</Popover.Popup>
  </Popover.Positioner>
</Popover.Portal>

Call it from a template expression or inside $derived so it stays live. A bare const direction = getDirection() in <script> runs once and keeps whatever direction was active at initialization.

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

  const direction = $derived(getDirection())
</script>

Return value

type ReturnValue = TextDirection

Additional types

TextDirection

type TextDirection = 'ltr' | 'rtl'