RTL 支持
shadcn/ui 组件对从右到左（RTL）布局提供一流的支持。文本对齐、定位和方向样式会自动适应阿拉伯语、希伯来语和波斯语等语言。
当您安装组件时，CLI 会自动将物理定位类转换为逻辑等价类，因此您的组件在 LTR 和 RTL 上下文中都能无缝工作。
入门
选择您的框架以开始使用 RTL 支持：
工作原理
当您在 components.json 中设置 rtl: true 后添加组件时，shadcn CLI 会自动转换类和 props 以兼容 RTL：
- 物理定位类如
left-*和right-*被转换为逻辑等价类如start-*和end-*。 - 方向性 props 更新为使用逻辑值。
- 文本对齐和间距类相应调整。
- 支持的图标自动使用
rtl:rotate-180翻转。
在线体验
点击链接在 v0 中打开一个带有 RTL 支持的 Next.js 项目： Open in v0
支持的样式
通过 CLI 的自动 RTL 转换仅适用于使用 shadcn create 创建并使用新样式的项目（base-nova、radix-nova 等）。
对于其他样式，请参阅迁移指南。
字体推荐
为获得最佳 RTL 体验，我们推荐使用对目标语言有适当支持的字体。Noto 字体系列非常适合此用途，并且与 Inter 和 Geist 搭配良好。
动画
CLI 也处理动画类，自动将物理方向动画转换为逻辑等价类。例如，slide-in-from-right 变为 slide-in-from-end。
这确保了下拉菜单、弹出框和工具提示等动画基于文档的文本方向以正确的方向播放。
关于 tw-animate-css 的说明：
tw-animate-css 库存在一个已知问题，逻辑幻灯工具类无法按预期工作。目前，请确保向 portal 元素传递 dir prop：
tsx<PopoverContent dir="rtl">
tsx<PopoverContent dir="ltr">
迁移现有组件
如果您在启用 RTL 之前已安装现有组件，可以通过 CLI 迁移它们。
运行 migrate 命令
bashnpx shadcn@latest migrate rtl [path]
[path] 接受一个路径或 glob 模式来迁移。如果您不提供路径，它将迁移 ui 目录中的所有文件。
这将执行以下操作：
- 更新
components.json设置rtl: true - 将物理 CSS 属性转换为逻辑等价类（例如
ml-4→ms-4，text-left→text-start） - 在需要的地方添加
rtl:变体（例如space-x-4→space-x-4 rtl:space-x-reverse）
手动迁移（可选）
以下组件不会由 CLI 自动迁移。请按照每个组件的 RTL 支持章节手动迁移：
迁移图标
某些图标如 ArrowRightIcon 或 ChevronLeftIcon 可能需要 rtl:rotate-180 类才能正确翻转。将 rtl:rotate-180 类添加到图标组件以正确翻转：
tsx<ChevronRightIcon className="rtl:rotate-180" />
添加 direction 组件
将 direction 组件添加到您的项目：
bashnpx shadcn@latest add direction
添加 DirectionProvider
按照您框架的文档了解如何将 DirectionProvider 组件添加到项目。