Chapter 42: Direction Provider (Utility)

Core Idea

Wraps an app to declare a global reading direction (LTR/RTL) so every Radix primitive adjusts its keyboard navigation and layout logic accordingly, without passing dir to each component individually.

Key Concepts

• Provider: single part, single prop — dir ("ltr" | "rtl").
• Global inheritance: primitives that accept their own dir prop still allow per-instance overrides, but wrapping the app once handles the common case.

Code Examples

<Direction.Provider dir="rtl">
  {/* your app */}
</Direction.Provider>

• What it demonstrates: the standard root-level setup for a right-to-left localized app.

Key Takeaways

1. Set this once at the app root for RTL locales instead of threading dir through every individual Menu/Tabs/RadioGroup/etc. instance.
2. Components with directional keyboard behavior (arrow-key navigation in Tabs, RadioGroup, Menu family) all read from this — it's not purely visual.

Connects To

• Any primitive with a dir prop or orientation-dependent arrow-key navigation (Tabs, Accordion, RadioGroup, Menubar, ContextMenu, DropdownMenu): all inherit from this provider unless individually overridden.