# Direction

RTL/LTR utility.

Group: Navigation

## Import

```tsx
import { Direction } from "@indoku/ui"
```

## Examples

### Basic usage

```tsx
function DirectionDemo() {
  const [dir, setDir] = useState<"ltr" | "rtl">("ltr")

  return (
    <Stack gap="3">
      <HStack gap="2">
        <Button size="sm" variant={dir === "ltr" ? "solid" : "outline"} onClick={() => setDir("ltr")}>
          LTR
        </Button>
        <Button size="sm" variant={dir === "rtl" ? "solid" : "outline"} onClick={() => setDir("rtl")}>
          RTL
        </Button>
      </HStack>
      <Direction.Root dir={dir}>
        <Card.Root p="4" maxW="sm">
          <Text fontSize="sm" fontWeight="medium">
            {dir === "rtl" ? "مرحبا بكم في التطبيق" : "Welcome to the app"}
          </Text>
          <HStack gap="2" mt="3">
            <Button size="sm" variant="outline">Cancel</Button>
            <Button size="sm">Continue</Button>
          </HStack>
        </Card.Root>
      </Direction.Root>
    </Stack>
  )
}
```

## Props

### Root

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `dir` * | `Direction` |  |  |
| `children` | `ReactNode` |  |  |

`*` = required. Style props and HTML attributes are accepted too.