# Direction

> RTL/LTR reading direction for Radix primitives.

Import from `@aspyn-io/kit`. Scaffold source: `npx shadcn@latest add https://design.aspyn.io/r/direction.json`

## Install

```tsx
import { DirectionProvider, useDirection } from "@aspyn-io/kit";
```

### Direction provider

Propagates reading direction to descendant Radix primitives so they flip correctly for RTL languages. Toggle to see the slider re-orient.

```tsx
const [dir, setDir] = React.useState<"ltr" | "rtl">("ltr");

<DirectionProvider dir={dir}>
  <div dir={dir}>
    <Slider defaultValue={[40]} max={100} step={1} />
  </div>
</DirectionProvider>
```

## Notes

- Set dir="rtl" on the <html> element (or a wrapper) for CSS, and wrap the app in DirectionProvider so the JS-side context that Radix primitives read stays in sync.
- useDirection() returns the current "ltr" | "rtl" from the nearest provider — use it to mirror your own icons or layout logic.
- direction is an alias for Radix's dir prop; when both are passed, direction wins.