Direction

The text-direction context every component reads for its logical-property layout — a provider and the hook that resolves it.

Install

Add Direction from the VegaStack registry. The CLI verifies the item's integrity hash before writing it.

pnpm dlx shadcn@latest add @vegastack/direction

Usage

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

<html dir="rtl">
  <body>
    <DirectionProvider direction="rtl">{/* your app */}</DirectionProvider>
  </body>
</html>;

Examples

useDirection

useDirection returns the direction the nearest provider resolved, so a component can branch on it without reading the DOM.

import { useDirection } from "@/components/ui/direction";

function MyComponent() {
  const direction = useDirection();
  return <div>Current direction: {direction}</div>;
}

direction: ltrdirection: rtl

API Reference

DirectionProvider adds no props of its own — it accepts everything the underlying element or Base UI primitive accepts (className, ref, ARIA attributes, event handlers).

Accessibility

The provider renders no element and takes no focus; it only supplies context.
Set dir on the document (or on the subtree) as well — DirectionProvider tells components which way to lay out, while dir is what the browser and assistive tech read for text rendering and caret movement.
Every component in this system is written in logical properties (ps-*, pe-*, start-*, end-*), so a right-to-left subtree mirrors without any per-component work.

Contract	States tested
Behaviour	`default`
Accessibility	`native-or-base-ui-semantics`
Visual	`default`

Do / Don't

Wrap the app once, at the root, and pass the same value you put on the document's dir attribute.

Don't

Use DirectionProvider instead of dir — it does not change how the browser renders or selects text.

Deviations

Upstream's file plus packages/ui/upstream/patches/direction.patch. Every hunk:

DOC-1, DOC-2 — the registry stamp header (// @vegastack direction@… sha256-…) that the three-synced-copies model and meta.integrity require, plus the repository formatter's semicolons. The file is a two-name re-export of Base UI's direction provider and nothing about its behaviour changes.

On this page