January 2026 - RTL Support

JGuang UI now has first-class support for right-to-left (RTL) layouts. Your components automatically adapt for languages like Arabic, Hebrew, and Persian.

This works with the JGuang UI components as well as any component distributed on the JGuang UI registry.

Component preview · Base UI
alert-rtl

Our approach to RTL

Traditionally, component libraries that support RTL ship with logical classes baked in. This means everyone has to work with classes like ms-4 and start-2, even if they're only building for LTR layouts.

We took a different approach. The JGuang UI CLI transforms classes at install time, so you only see logical classes when you actually need them. If you're not building for RTL, you work with familiar classes like ml-4 and left-2. When you enable RTL, the CLI handles the conversion for you.

You don't have to learn RTL until you need it.

How it works

When you add components with rtl: true set in your components.json, the CLI automatically converts physical CSS classes like ml-4 and text-left to their logical equivalents like ms-4 and text-start.

Physical positioning classes like left-* and right-* become start-* and end-*.
Margin and padding classes like ml-* and pr-* become ms-* and pe-*.
Text alignment classes like text-left become text-start.
Directional props are updated to use logical values.
Supported icons are automatically flipped using rtl:rotate-180.
Animations like slide-in-from-left become slide-in-from-start.

RTL examples for every component

We've added RTL examples for every component. You'll find live previews and code on each component page.

Component preview · Base UI
card-rtl

CLI updates

New projects: Use the --rtl flag with init or create to enable RTL from the start.

Use the JGuang UI Registry URL provided on /systems/jguang-ui#install.

Use the JGuang UI Registry URL provided on /systems/jguang-ui#install.

Existing projects: Migrate your components with the migrate rtl command.

Use the JGuang UI Registry URL provided on /systems/jguang-ui#install.

This transforms all components in your ui directory to use logical classes. You can also pass a specific path or glob pattern.

Try it out

Click the link below to open a Next.js project with RTL support in v0.