Direction

Writing-direction provider consumed by every direction-aware family.


Package	`@vizejs/ui/direction`
Maturity	stable
Own the source	`vize lib pull direction`
Requires	context
Aliases	direction provider, rtl, bidi, writing direction
Covers	HTML dir attribute, Radix DirectionProvider, React Aria useLocale direction

Minimal setup

Use a Vue 3.5+ project with Vue SFC compilation configured (see Vite+ integration).

vp install @vizejs/ui

Add the public import below to <script setup lang="ts">. Components provide behavior without styles; the preview uses optional Paper styles.

import { DirectionProvider } from "@vizejs/ui/direction";

Or copy the source into your project with vize lib pull direction (see Source Distribution).

Try it

This is the basic example maintained with the component source, using the public package imports. The preview adds the optional Paper styles.

Open the interactive example · Styling these components

Copy the example

<!-- Right-to-left subtree whose children read the inherited direction from DirectionProvider. -->
<script setup lang="ts">
import { DirectionProvider } from "@vizejs/ui/direction";
</script>

<template>
  <DirectionProvider v-slot="{ dir }" dir="rtl" as="section">
    <p lang="ar">مرحبا بالعالم</p>
    <output>Direction: {{ dir }}</output>
  </DirectionProvider>
</template>

API

`DirectionProvider`

Source: src/families/i18n/direction/direction-provider.vue

Props

Prop	Type	Default	Description
`dir`	`Direction`	`undefined`	Direction for the subtree. `undefined` inherits the nearest provider (or `"ltr"`).
`as`	`keyof HTMLElementTagNameMap \| null`	`"div"`	Native wrapper element that also receives the `dir` attribute so text and CSS logical properties follow. `null` renders the slot without a wrapper.

Slots

Slot	Slot props	Description
`default`	`DirectionSlotState`	Direction-aware subtree. Receives the resolved direction.

Exposed

Member	Type	Description
`dir`	`Direction`	Direction published to the subtree.
`element`	`HTMLElement \| null`	Rendered wrapper element, or `null` when `as` is `null`.

Behavior

Normative behavior for @vizejs/ui/direction (direction-provider.vue, useResolvedDirection). Every row is proven by the named test.

State x input	Observable outcome	Proven by
`DirectionProvider dir="rtl"`	A native wrapper (`as`, default `div`) carries `dir="rtl"`, `data-vize-ui="direction-provider"`, and the slot receives `dir`.	`provider renders a dir wrapper and publishes the direction to its slot`
`useResolvedDirection(local)`	Resolves the local value first, then the nearest provided direction, then `"ltr"`; unknown values are ignored.	`useResolvedDirection prefers the local value, then the provider, then ltr`
`as=null` nested provider	Renders the slot without a wrapper while still inheriting and re-publishing the direction.	`useResolvedDirection prefers the local value, then the provider, then ltr`
direction-aware family without `dir` inside a provider	The family renders `dir` from the provider and flips horizontal arrow keys (Accordion shown).	`direction-aware families inherit the provider and flip horizontal arrow keys`
family with an explicit `dir` prop	The prop overrides the provided direction.	`an explicit dir prop overrides the provided direction`
`LocaleProvider direction="rtl"`	LocaleProvider also publishes the direction context, so families inherit it.	`LocaleProvider publishes its resolved direction to direction-aware families`
SSR	Inherited direction is resolved without reading `document.dir`; output is byte-identical across requests.	`server output resolves inherited direction without reading the document`
hydration	Server markup is reused with zero warnings.	`hydrates inherited direction without diagnostics`
public types	`Direction` is a closed union and `as` accepts native tags or `null`.	`src/families/i18n/direction/direction.types.test-d.ts`
DOM/SSR/Vapor	`direction-provider.vue` compiles in every renderer lane.	`scripts/check-renderers.ts`

Direction-aware families

Accordion, Tabs, Tree, Carousel, NavigationMenu, Menu, Menubar, DropdownMenu, ContextMenu, SplitterGroup, and Resizable default dir to undefined and resolve it with useResolvedDirection. Explicit dir="ltr" | "rtl" keeps its previous meaning.

Target	Public contract
Root	native `as` element, `part="root"`, `data-vize-ui="direction-provider"`, `dir`