Chapter 49: Direction Provider

Core Idea

Tells Base UI components (arrow-key navigation direction, positioning logic) that the app is RTL — it does not touch actual HTML/CSS direction, which the app must still set itself via dir="rtl"/direction: rtl.

Key Concepts

• Anatomy: <DirectionProvider direction="rtl"> wraps the app or a subtree — no other parts.
• Behavior-only, not visual: affects Base UI's internal logic (which arrow key means "next", positioning side flips) but not layout/rendering — the app is still responsible for dir="rtl" on the relevant DOM ancestor and any RTL-aware CSS.
• useDirection hook: reads the current direction — specifically useful for content portaled outside the app root (which wouldn't otherwise inherit an ancestor's dir attribute) so it can apply RTL-aware styling itself.
• Default: 'ltr' if no provider is present.

Reference Tables

Export	Notable props / return
DirectionProvider	direction: 'ltr' | 'rtl' (default 'ltr')
useDirection()	returns 'ltr' | 'rtl'

Key Takeaways

1. Always pair DirectionProvider with your own dir="rtl" on the actual DOM root — the provider alone changes no visuals.
2. Use useDirection() inside any custom component rendered into a portal (e.g. a custom popup content component) that needs to know the ambient direction, since it won't inherit dir through the portal boundary automatically.

Connects To

• ch040 (Slider): the documented example demoing RTL behavior (thumb drag direction reversed) uses this provider directly.