Direction

A layout wrapper that sets the `dir` attribute and provides direction context to children. Supports explicit LTR/RTL, dynamic detection from language tags, and the `asChild` pattern for flexible composition.

direction ltr rtl layout i18n locale arabic hebrew bidi

Loading preview...

Examples

Practical examples and common states for the same installable component.

RTL

Explicit right-to-left direction for RTL languages.

examples/direction-rtl.tsx

 1"use client";
 2
 3import { Direction } from "@/components/wensity/direction";
 4
 5export function RTLDemo() {
 6  return (
 7    <Direction direction="rtl">
 8      <div>
 9        <p>محتويات باللغة العربية</p>
10        <button>إرسال</button>
11      </div>
12    </Direction>
13  );
14}

Dynamic

Auto-detects direction from a language tag.

examples/direction-dynamic.tsx

 1"use client";
 2
 3import { Direction } from "@/components/wensity/direction";
 4
 5export function DynamicDemo({ lang }: { lang: string }) {
 6  return (
 7    <Direction dynamic lang={lang}>
 8      <div>
 9        <p>
10          {lang === "ar"
11            ? "مرحباً بالعالم"
12            : "Hello, world!"}
13        </p>
14      </div>
15    </Direction>
16  );
17}

Side-by-side

LTR vs RTL comparison of the same component.

examples/direction-comparison.tsx

 1"use client";
 2
 3import { Direction } from "@/components/wensity/direction";
 4
 5export function ComparisonDemo() {
 6  return (
 7    <div className="grid grid-cols-2 gap-4">
 8      <Direction direction="ltr">
 9        <div>Left-to-right content</div>
10      </Direction>
11      <Direction direction="rtl">
12        <div>Right-to-left content</div>
13      </Direction>
14    </div>
15  );
16}