Direction
The RTL provider for the whole kit.
Overview
DirectionProvider sets the reading direction once at the app root, and
every Base UI-based kit component — menus, selects, sliders, sheets — follows
it. Purely behavioral. The kit ships LTR by default; pair the provider with
dir="rtl" on <html> (or a subtree) to opt in.
$ npx morpha-ui add directionInstallation
Morpha UI components are distributed via the Morpha CLI: npx morpha-ui add direction. In the meantime, since this is the base shadcn component, you
can also add it directly:
npx shadcn@latest add directionAPI Reference
Prop
Type
Accessibility
- Set
diron the HTML element too — CSS logical properties and screen readers read it from the DOM, not from React context. useDirectionlets custom components follow the provided direction.