Direction

How LTR/RTL works across the whole system.

How it works

Three things have to agree, or RTL breaks in ways that are hard to trace.

CSS

dir on <html> drives logical properties (ms-, pe-, start-) and Tailwind's rtl: variant.

Keyboard

Radix's DirectionProvider inverts arrow-key navigation in menus, tabs, and sliders.

React

useDirection() exposes the value for the rare case where CSS alone can't express it.

Use logical properties everywhere: ms-4, pe-2, start-0, text-start, rounded-s-lg, border-e.

Don't

Never use physical ones in a component: ml-4, pr-2, left-0, text-left, rounded-l-lg, border-r.

Isolate inherently-LTR strings — phone numbers, IDs, URLs, version strings, shortcut notation — with <bdi dir="ltr">.

Don't

Don't let a bidi algorithm reorder a phone number. +880 1712 345678 becomes 345678 1712 880+ and users dial the wrong thing.

Switch the header toggle to RTL to see the difference.

Unisolated: +880 1712 345678

Isolated: +880 1712 345678

Test both, always

Every component in this library is reviewed in both directions before it ships. The toggle in the header isn't a demo feature — it's the review tool.