Preview

Installation

npx sigma-ui@latest add direction

Usage

Direction wraps Reka UI ConfigProvider and passes dir through. Primitives inside it, including portaled menus and dialogs, inherit that direction. useDirection reads the nearest value.

Set the same dir on <html> as well. The provider does not change the document direction, and portaled content is rendered outside this element, so page layout and text alignment follow the document.

<script setup lang="ts">
import { Direction, useDirection } from '@/components/ui/direction';
</script>

<template>
  <Direction dir="rtl">
    <p>This subtree is right to left.</p>
  </Direction>
</template>

Examples

Right to left

API Reference

Direction

Props

Prop	Type	Default
dir Reading direction inherited by Reka primitives inside this provider.	Direction	"ltr"
locale Locale inherited by Reka primitives inside this provider.	string	"en"

Slots

Slot	Scope
default Content that inherits this reading direction.	-

Accessibility

Direction is not a control. It sets the reading direction used by the components inside it. Keep the provider value and the document dir in agreement so focus order, text, and layout describe the same direction.

Key	Description
Tab	Moves focus through the content inside the provider.