RTL

shadcn/ui 组件对从右到左 (RTL) 布局提供一流支持。文本对齐、定位和方向样式会自动适应阿拉伯语、希伯来语和波斯语等语言。

安装组件时，CLI 会自动将物理定位类转换为逻辑等价类，使您的组件能够在 LTR 和 RTL 两种上下文中无缝工作。

快速开始#

选择您的框架，开始使用 RTL 支持。

工作原理#

当您在 components.json 中设置 rtl: true 并添加组件时，shadcn CLI 会自动转换类与属性，使其支持 RTL：

• 物理定位类如 left-* 与 right-* 会转换为逻辑等价的 start-* 与 end-*。
• 方向相关的属性将更新为使用逻辑值。
• 文本对齐和间距类会相应调整。
• 支持的图标会自动通过 rtl:rotate-180 翻转。

试用#

点击下面的链接，打开一个包含 RTL 支持的 Next.js v0 项目。

支持的样式#

通过 CLI 自动进行的 RTL 转换仅适用于使用 shadcn create 创建、使用新样式（比如 base-nova、radix-nova 等）的项目。

其他样式请参阅 迁移指南。

字体建议#

为了获得最佳 RTL 体验，我们推荐使用对目标语言有良好支持的字体。Noto 是一个极佳的字体家族，且与 Inter 和 Geist 搭配良好。

有关如何安装和配置 RTL 字体的详情，请参阅您框架下的 RTL 指南，见 快速开始。

动画#

CLI 同样处理动画类，自动将物理方向的动画转换为逻辑等价。例如，slide-in-from-right 会变为 slide-in-from-end。

这确保了下拉菜单、弹出框和工具提示等动画能根据文档的文本方向向正确方向播放。

关于 tw-animate-css 的说明：

tw-animate-css 库存在一个已知问题，逻辑滑动工具类无法正常工作。当前请确保为 portal 元素传入 dir 属性。

Copy<Popover>
  <PopoverTrigger>Open</PopoverTrigger>
  <PopoverContent dir="rtl">
    <div>Content</div>
  </PopoverContent>
</Popover>

Copy<Tooltip>
  <TooltipTrigger>Open</TooltipTrigger>
  <TooltipContent dir="rtl">
    <div>Content</div>
  </TooltipContent>
</Tooltip>

迁移现有组件#

如果您在启用 RTL 之前已经安装了组件，可以通过 CLI 进行迁移，步骤如下：

pnpmnpmyarnbun
pnpm dlx shadcn@latest migrate rtl [path]
Copy

Copy<ArrowRightIcon className="rtl:rotate-180" />

pnpmnpmyarnbun
pnpm dlx shadcn@latest add direction
Copy