Starting your winter arc? 🥶 Get 25% off every plan and template with
WensityWensity

Direction

LTR and RTL direction context for layout and composition, driving reading order from the active locale automatically.

directionltrrtllayouti18nlocalearabichebrewbidi
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
"use client";


import { Direction } from "@/components/wensity/direction";


export function RTLDemo() {
  return (
    <Direction direction="rtl">
      <div>
        <p>محتويات باللغة العربية</p>
        <button>إرسال</button>
      </div>
    </Direction>
  );
}

Dynamic

Auto-detects direction from a language tag.

examples/direction-dynamic.tsx
"use client";


import { Direction } from "@/components/wensity/direction";


export function DynamicDemo({ lang }: { lang: string }) {
  return (
    <Direction dynamic lang={lang}>
      <div>
        <p>
          {lang === "ar"
            ? "مرحباً بالعالم"
            : "Hello, world!"}
        </p>
      </div>
    </Direction>
  );
}

Side-by-side

LTR vs RTL comparison of the same component.

examples/direction-comparison.tsx
"use client";


import { Direction } from "@/components/wensity/direction";


export function ComparisonDemo() {
  return (
    <div className="grid grid-cols-2 gap-4">
      <Direction direction="ltr">
        <div>Left-to-right content</div>
      </Direction>
      <Direction direction="rtl">
        <div>Right-to-left content</div>
      </Direction>
    </div>
  );
}

Installation

Run the following command

~/your-project
pnpm dlx wensity@latest add direction

Usage

Import Direction from @/components/wensity/direction and render it anywhere in your React or Next.js app. The source lands in your own repo, so every prop, class and animation below is yours to edit.

app/example.tsx
import { Direction, useDirection } from "@/components/wensity/direction";


export function RTLExample() {
  return (
    <Direction direction="rtl">
      <p>This text and all children flow right-to-left.</p>
    </Direction>
  );
}


export function DynamicExample() {
  return (
    <Direction dynamic lang="ar">
      <p>يتكيف هذا النص تلقائيًا مع اللغة العربية.</p>
    </Direction>
  );
}

Props

PropTypeDefaultDescription
direction"ltr" | "rtl"-Explicit text direction for the subtree.
dynamicbooleanfalseDerives the direction from lang instead of setting it explicitly.
langstring-BCP 47 language tag used with dynamic, such as en, ar, or he.
asChildbooleanfalseMerges onto the child element instead of wrapping it in a div.