# Direction

A provider that sets the reading direction, left-to-right or right-to-left, for the components inside it.

Direction is an open-source component from suiss/ui for React. The @esuiss/ui CLI copies its source into your project, so you own the code.

Source: https://ui.suiss.app/docs/components/direction

**React**

**Example**

```tsx
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

```bash title="Terminal"
npx shadcn@latest add @esuiss/direction
```

Works in any project with a `components.json`. See [Installation](https://ui.suiss.app/docs/installation#add-components) for the one-line registry setup. Or use the suiss/ui CLI:

```bash title="Terminal"
npx @esuiss/ui@latest add direction
```

### Manual

1. Install the dependencies:

```bash title="Terminal"
npm install @base-ui/react
```

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

```tsx title="components/ui/direction.tsx"
"use client"

export {
  DirectionProvider,
  useDirection,
} from "@base-ui/react/direction-provider"
```

3. Update the import paths to match your project.

## Usage

```tsx
<DirectionProvider direction="ltr">
  <DirectionPreview />
</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.

**Example**

```tsx
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 DirectionRightToLeft() {
  return (
    <DirectionProvider direction="rtl">
      <DirectionPreview />
    </DirectionProvider>
  )
}
```

## 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"`.