Direction Provider
Tells the component primitives which way the writing runs, so menus and sliders mirror with the rest of the page.
- Foundations
- 1 file
- 1 npm package
- Accessibility notes
Loading the example…
pnpm dlx @dowel-ui/cli add directionnpm packages installed: radix-ui.
import { DirectionProvider } from "@/components/ui/direction";<DirectionProvider>
| Prop | Type | Default |
|---|---|---|
dir (required) | "ltr" | "rtl" | — |
children | ReactNode | — |
Needed only for right-to-left languages, and needed in addition to `dir` on the document rather than instead of it. The styling here is written with logical properties and follows `dir` by itself; the primitives underneath read direction from React context and assume left-to-right without a provider, which mirrors a page correctly except for its menus, selects and sliders — worse than not mirroring at all, because it looks deliberate.
6/6
checks passed
- Tested — passes
- axe assertion — passes
- Keyboard tested — does not apply
- Storybook examples — passes
- Accessibility documented — passes
- Semantic tokens only — passes
- Motion from tokens — does not apply
- className merged — does not apply
- Visible focus — does not apply
- No fixed widths — passes