Direction

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

Install

Configure registry credentials first using the Quickstart. Before copying this item or any transitive registry dependency, verify the signed manifest and save the exact bytes for Direction before installation. Retain the digest printed by this command.

pnpm exec vegastack-design verify direction

Install with the pinned shadcn CLI. Bare shadcn does not verify VegaStack signature or integrity.

pnpm dlx shadcn@4.21.0 add @vegastack/direction

Run the exact offline --post-write command printed by the preflight, using its saved item path and independently retained --expected-integrity digest. Use the saved preflight for every transitive registry dependency too; stop on any mismatch before using the components.

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.

InstallCopy Anchor Link

UsageCopy Anchor Link

ExamplesCopy Anchor Link

useDirectionCopy Anchor Link

API ReferenceCopy Anchor Link

AccessibilityCopy Anchor Link

Do / Don'tCopy Anchor Link

DeviationsCopy Anchor Link

On this page