Right-to-left

Set dir in two places: on <html>, for the page and your own layout, and on the provider, for the components' behaviour:

<html dir="rtl">

<BooleanUIProvider dir="rtl">
  <App />
</BooleanUIProvider>

In a WordPress plugin, take both from WordPress: is_rtl() in PHP, or the rtl class WordPress puts on <body>.

• Layout: spacing, alignment and positions use the logical sides, start and end, so they swap in right-to-left. The sidebar's side="left" and a sheet's side="left" mean the start edge, which is the right in right-to-left; side="right" means the end.
• Arrows: chevrons that point along the reading direction turn round: pagination, breadcrumbs, sub-menus and the calendar's month buttons.
• Keyboard: in menus, tabs, radio groups and toggle groups, the left and right arrow keys follow the reading direction. In the calendar, the right arrow key moves to the previous day.
• Motion: sheets slide in from the edge they sit on.
• Toasts: the close button moves to the top corner at the end.

Use Tailwind CSS's logical utilities for your own layout: ms-* and me-* rather than ml-* and mr-*, ps-* and pe-*, start-* and end-*, text-start and text-end. For an icon that points along the reading direction, add rtl:rotate-180.

Try any page of this site in right-to-left with ⚙ → Direction → RTL.