Direction

Provide text direction to components that support right-to-left layouts.

View component source ↗

Preview

Example

A minimal example to get started.

مرحبا بالعالم

Right-to-left layout

Installation

Install this component and its dependencies in a project initialized with shadcn.

pnpm dlx shadcn@latest add https://ui.hyunjoon.net/r/direction.json

Usage

This is the basic example. Use the Code tab above for the selected example. Adjust import aliases to match your project.

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

export default function Example() {
  return (
    <DirectionProvider direction="rtl">
      <div dir="rtl" className="w-64 rounded-lg border p-5 text-start">
        <p className="font-medium">مرحبا بالعالم</p>
        <p className="mt-2 text-sm text-muted-foreground">Right-to-left layout</p>
      </div>
    </DirectionProvider>
  );
}

API reference

Derived from the installed component types. Native DOM props are also supported where applicable. A dash means no explicit default is documented. Some props depend on the selected mode.

DirectionProvider

DirectionProvider properties
Prop	Type	Default	Description
`children`	React.ReactNode React.ReactNode	`—`	Content rendered inside this component.
`direction`	TextDirection \| undefined TextDirection \| undefined	`'ltr'`	The reading direction of the text

Usage notes

Wrap the relevant subtree in DirectionProvider. Set the HTML dir attribute as well when surrounding text and layout should follow the same direction.