# RTL · JGuang UI

> Right-to-left support for JGuang UI components.

- Page: https://jiguang132.com/systems/jguang-ui/docs/rtl
- Based on: shadcn/ui documentation (MIT) @ bc0705384b51252af26dcc65425b216bf5eb063c

JGuang UI components have first-class support for right-to-left (RTL) layouts. Text alignment, positioning, and directional styles automatically adapt for languages like Arabic, Hebrew, and Persian.


> **Component preview · Base UI**  
> `card-rtl`


When you install components, the CLI automatically transforms physical positioning classes to logical equivalents, so your components work seamlessly in both LTR and RTL contexts.

## Get Started

Select your framework to get started with RTL support.


  

[Next.js](/systems/jguang-ui/docs/rtl/next)


  

[Vite](/systems/jguang-ui/docs/rtl/vite)


  

[TanStack Start](/systems/jguang-ui/docs/rtl/start)


## How it works

When you add components with `rtl: true` set in your `components.json`, the JGuang UI CLI automatically transforms classes and props to be RTL compatible:

- Physical positioning classes like `left-*` and `right-*` are converted to logical equivalents like `start-*` and `end-*`.
- Directional props are updated to use logical values.
- Text alignment and spacing classes are adjusted accordingly.
- Supported icons are automatically flipped using `rtl:rotate-180`.

## Try it out

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

[![Open in v0](https://v0.app/chat-static/button.svg)](/systems/jguang-ui#open-source-attribution)

## Supported Styles

Automatic RTL transformation via the CLI is only available for projects created using `JGuang UI Registry` with the new styles (`base-nova`, `radix-nova`, etc.).

For other styles, see the [Migration Guide](#migrating-existing-components).

## Font Recommendations

For the best RTL experience, we recommend using fonts that have proper support for your target language. [Noto](https://fonts.google.com/noto) is a great font family for this and it pairs well with Inter and Geist.

See your framework's RTL guide under [Get Started](#get-started) for details on installing and configuring RTL fonts.

## Animations

The CLI also handles animation classes, automatically transforming physical directional animations to their logical equivalents. For example, `slide-in-from-right` becomes `slide-in-from-end`.

This ensures animations like dropdowns, popovers, and tooltips animate in the correct direction based on the document's text direction.

**A note on tw-animate-css:**

There is a [known issue](https://github.com/Wombosvideo/tw-animate-css/issues/67) with the `tw-animate-css` library where the logical slide utilities are not working as expected. For now, make sure you pass in the `dir` prop to portal elements.

```tsx showLineNumbers /dir="rtl"/
<Popover>
  <PopoverTrigger>Open</PopoverTrigger>
  <PopoverContent dir="rtl">
    <div>Content</div>
  </PopoverContent>
</Popover>
```

```tsx showLineNumbers /dir="rtl"/
<Tooltip>
  <TooltipTrigger>Open</TooltipTrigger>
  <TooltipContent dir="rtl">
    <div>Content</div>
  </TooltipContent>
</Tooltip>
```

## Migrating existing components

If you have existing components installed before enabling RTL, you can migrate them using the CLI as follows:


### Run the migrate command


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

`[path]` accepts a path or glob pattern to migrate. If you don't provide a path, it will migrate all the files in the `ui` directory.

### Manual Migration (Optional)

The following components are not automatically migrated by the CLI. Follow the RTL support section for each component to manually migrate them.

- [Calendar](/systems/jguang-ui/docs/components/base/calendar#rtl-support)
- [Pagination](/systems/jguang-ui/docs/components/base/pagination#rtl-support)
- [Sidebar](/systems/jguang-ui/docs/components/base/sidebar#rtl-support)

### Migrate Icons

Some icons like `ArrowRightIcon` or `ChevronLeftIcon` might need the `rtl:rotate-180` class to be flipped correctly. Add the `rtl:rotate-180` class to the icon component to flip it correctly.

```tsx showLineNumbers /rtl:rotate-180/
<ArrowRightIcon className="rtl:rotate-180" />
```

### Add direction component

Add the direction component to your project.

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

### Add DirectionProvider

Follow your framework's documentation for details on how to add the `DirectionProvider` component to your project.

See the [Get Started](#get-started) section for details on how to add the `DirectionProvider` component to your project.

---

Index of all JGuang resources: https://jiguang132.com/llms.txt