RTL (从右至左)

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

当你安装组件时，CLI 会自动将物理定位类转换为逻辑等效类，因此你的组件可以在 LTR（从左至右）和 RTL 上下文中无缝工作。

开始使用

选择你的框架以开始使用 RTL 支持。

工作原理

当你在 components.json 中设置 rtl: true 并添加组件时，shadcn CLI 会自动转换类和属性，使其兼容 RTL。

• 像 left-* 和 right-* 这样的物理定位类会被转换为逻辑等效类，例如 start-* 和 end-*。
• 方向性 Props 会更新为使用逻辑值。
• 文本对齐和间距类也会相应进行调整。
• 支持的图标会使用 rtl:rotate-180 自动翻转。

试一试

点击下方链接，在 v0 中打开一个支持 RTL 的 Next.js 项目。

支持的样式

通过 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 库有一个已知问题，即逻辑滑动工具类无法按预期工作。目前，请确保将 dir 属性传递给 portal 元素。

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