Direction
@/components/kamod-ui/direction
Installation
Import DirectionProvider, Direction, and useDirection from `@/components/kamod-ui/direction` (no Radix package required).
pnpm add @kamod-ch/uiUsage
Wrap subtrees that need explicit direction. Combine with `dir` on `<html>` for full-page RTL. Use logical Tailwind utilities (`ms-*`, `me-*`, `ps-*`, `pe-*`) so layouts flip automatically.
import { Direction } from "@/components/kamod-ui/direction";<Direction />DirectionProvider
shadcn-style API: `direction` prop sets context and wraps children in a `div` with `dir`.
Direction (dir)
Legacy Kamod API — same behavior using the `dir` prop.
useDirection
Read the current direction inside any descendant.
useDirection(): ltr
Document + provider
For production RTL, set `dir` on the root `<html>` element and still use DirectionProvider so hooks and portaled UI see the same value.
Set dir on html for document-wide defaults; keep DirectionProvider aligned so useDirection() matches.
API Reference
Props, slots and variants for this component.
Direction
Direction component props and accepted values.
| Prop | Type | Default |
|---|---|---|
| DirectionProvider direction | "ltr" | "rtl" | "ltr" |
| Direction dir | "ltr" | "rtl" | "ltr" |
| useDirection() | DirectionValue | "ltr" (fallback if no provider) |
Accessibility Notes
Match `dir` to the active locale so reading order, tab order, and screen reader traversal follow user expectations. Prefer logical CSS over hard-coded left/right margins.