Themes, localization, and RTL

Configure deterministic themes, locale-aware formatting, time zones, currency, and text direction.

Both renderers accept the same RendererOptions object.

<RUIRenderer
  options={{
    theme: "system",
    locale: "ar-EG",
    currency: "EGP",
    timeZone: "Africa/Cairo",
    direction: "rtl",
  }}
>
  {source}
</RUIRenderer>

Option	Values/default
theme	light, dark, system; default system
locale	Canonical BCP 47 locale; default en-US
currency	ISO 4217 code; default USD
timeZone	IANA time zone; default UTC
direction	ltr, rtl, auto; default auto
externalLinkBehavior	confirm, direct; default confirm
resourceTiming	progressive, committed, manual; progressive

Options are validated, canonicalized, frozen, and exposed to custom components. Invalid locale, currency, time zone, or enum values throw an option-specific error.

For server rendering, pass identical explicit options on server and client to avoid hydration differences. System theme uses CSS media queries rather than a JavaScript listener. Portaled controls inherit language, direction, and theme context. Chart geometry remains LTR for predictable coordinates while labels, legends, tooltips, tables, and surrounding content follow the surface direction.