Direction

import { ArrowRightIcon } from "@phosphor-icons/react"
import { Button } from "@/components/ui/button"
import {
  Card,
  CardContent,
  CardDescription,
  CardFooter,
  CardHeader,
  CardTitle,
} from "@/components/ui/card"
import { DirectionProvider, useDirection } from "@/components/ui/direction"

function DirectionPreview() {
  const direction = useDirection()

  return (
    <Card dir={direction} className="w-80">
      <CardHeader>
        <CardTitle>Reading direction</CardTitle>
        <CardDescription>
          Current direction is {direction.toUpperCase()}.
        </CardDescription>
      </CardHeader>
      <CardContent>
        <p>
          Components that use logical properties flip their layout when the
          direction changes.
        </p>
      </CardContent>
      <CardFooter className="justify-end gap-2">
        <Button variant="ghost">Cancel</Button>
        <Button>
          Continue
          <ArrowRightIcon data-icon="inline-end" className="rtl:rotate-180" />
        </Button>
      </CardFooter>
    </Card>
  )
}

export default function DirectionDemo() {
  return (
    <DirectionProvider direction="ltr">
      <DirectionPreview />
    </DirectionProvider>
  )
}

The direction module provides DirectionProvider and useDirection from the chosen base. DirectionProvider takes a direction of ltr or rtl and makes it available to the primitives below it, so behaviors that depend on direction, such as arrow-key navigation and popup placement, follow the reading direction. useDirection returns the current direction for your own components.

The provider does not set the dir attribute on the page. Set dir on the html element or on a container yourself so that the browser and logical CSS properties flip the layout.

Installation

CLI

$ pnpm dlx shadcn@latest add @esuiss/direction

Works in any project with a components.json. See Installation for the one-line registry setup. Or use the suiss/ui CLI:

$ pnpm dlx @esuiss/ui@latest add direction

Manual

1. Install the dependencies:

$ pnpm add @base-ui/react

2. Copy the source into components/ui/direction.tsx:

3. Update the import paths to match your project.

Usage

<DirectionProvider

Wrap your app, or a subtree, in DirectionProvider with the same direction you set in the dir attribute. Read the value with useDirection when a component needs to adapt, for example to pass it to a dir attribute or to rotate a directional icon.

Examples

Right to left

The same card rendered with direction set to rtl, so its footer buttons appear in reversed order.

Notes

• Pair directional icons with the rtl: Tailwind variant, for example rtl:rotate-180, so arrows point the right way.
• Many components in the library use logical properties such as ps-, pe-, ms- and me-, which flip automatically under dir="rtl".