# Right-to-Left (RTL) (/ui/docs/react/rtl)
Appica UI supports right-to-left layouts. Most mirroring happens automatically
through CSS logical properties; a few components that compute layout in
JavaScript read the direction from [`DirectionProvider`](/ui/docs/react/direction-provider).
## Two things to set [#two-things-to-set]
For full RTL support, set the direction in **two** places:
**1. The `dir` attribute** on ``, so the browser mirrors text flow and
logical CSS resolves correctly:
```html
```
**2. `DirectionProvider`**, so components that position elements with JavaScript
(Slider, Switch, Carousel, menus, and other floating surfaces) know which way is
"end":
```tsx title="app/layout.tsx (Next.js)"
import { DirectionProvider } from '@appica/ui-react/providers/direction-provider'
export default function RootLayout({ children }: { children: React.ReactNode }) {
return (
{children}
)
}
```
`DirectionProvider` defaults to `ltr`, so you only need it when supporting RTL. With no provider, components behave
left-to-right.
The example uses Next.js's root layout; for the equivalent root file in Vite,
React Router / Remix, TanStack Start, and Astro, see the
[Framework notes](/ui/docs/react/installation#framework-notes) in Installation.
## Why most things "just work" [#why-most-things-just-work]
Appica UI styles with **logical** properties rather than physical ones — padding
and margins use `ps`/`pe` and `ms`/`me` (inline-start/end) instead of left/right,
and positioning uses `start`/`end`. These resolve against the document direction,
so a component laid out for LTR mirrors for RTL without any extra work.
Write your own RTL-ready markup the same way:
```tsx
// ✅ Mirrors automatically
…
// ❌ Stays put in RTL
…
```
## Floating popups in a scoped RTL region [#floating-popups-in-a-scoped-rtl-region]
Menus, selects, popovers, and other floating surfaces render in a **portal** at
the end of ``. Their `start` / `end` **alignment** mirrors based on the
direction the portalled element inherits from the document — read from CSS by the
positioning engine, **not** from `DirectionProvider`. With `dir="rtl"` on ``
(as above) this is automatic, so you never think about it.
It only matters when you scope RTL to a **subtree** of an otherwise-LTR page. The
popup escapes that subtree to the (LTR) ``, so its alignment stays
left-to-right even though the submenu *side* still follows `DirectionProvider`.
Give the popup's positioner the direction explicitly, or portal it into your RTL
container:
```tsx
// Set the direction on the positioner…
…
// …or render the popup inside your RTL container instead of
…
```
Prefer setting `dir="rtl"` on `` whenever the whole document is RTL — then every floating popup mirrors with no
per-component setup. The positioner override above is only for mixed LTR/RTL pages.
## Reading the direction in code [#reading-the-direction-in-code]
When your own component needs to branch on direction, read it with
[`useDirection`](/ui/docs/react/use-direction):
```tsx
'use client'
import { useDirection } from '@appica/ui-react/hooks/use-direction'
function NextIcon() {
const dir = useDirection()
return {dir === 'rtl' ? '←' : '→'}
}
```
## Switching at runtime [#switching-at-runtime]
To toggle direction without a full reload, update both the `` attribute
and the `DirectionProvider` value together so the CSS and JS channels stay in
sync.
See [`DirectionProvider`](/ui/docs/react/direction-provider) and
[`useDirection`](/ui/docs/react/use-direction) for the full reference.