Design system

Direction

Apply a left-to-right or right-to-left reading direction to a component subtree.

Use DirectionProvider when a component subtree needs to support a right-to-left language. The provider passes the chosen direction through Radix context; set the native dir attribute on content that also needs CSS and text layout to mirror.

Built on Radix UIUpstream API

Direction-aware content

Text alignment and inline icons follow the selected direction.

Current direction: ltr

Usage

<DirectionProvider dir="rtl">
  <SettingsPanel />
</DirectionProvider>

Prefer logical CSS properties and direction-aware icon placement inside the subtree so the same composition works in both reading directions.

Accessibility

Set the document language separately with lang; reading direction does not identify language. Test focus order, arrow-key behavior, and icon meaning in both directions.

Best practices

  • Put one provider around the smallest subtree that differs from the page direction.
  • Pass dir explicitly and allow nested Radix components to inherit it.
  • Use logical spacing and alignment utilities so layouts mirror without duplicate markup.