shadcn/ui 组件对从右到左（RTL）布局提供一等公民级支持。文本对齐、定位和方向性样式会自动适配阿拉伯语、希伯来语和波斯语等语言。
当你安装组件时，CLI 会自动把物理定位类转换为逻辑等价类，因此你的组件可以在 LTR 和 RTL 两种上下文中无缝工作。
开始使用
选择你的框架，开始使用 RTL 支持。
工作原理
当你在 components.json 中为组件设置 rtl: true 时，shadcn CLI 会自动转换类名和属性，使其兼容 RTL：
left-*和right-*这类物理定位类会转换为start-*和end-*这类逻辑等价类。- 方向性属性会更新为逻辑值。
- 文本对齐和间距类会相应调整。
- 支持的图标会使用
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 元素。
<Popover>
<PopoverTrigger>Open</PopoverTrigger>
<PopoverContent dir="rtl">
<div>Content</div>
</PopoverContent>
</Popover><Tooltip>
<TooltipTrigger>Open</TooltipTrigger>
<TooltipContent dir="rtl">
<div>Content</div>
</TooltipContent>
</Tooltip>迁移现有组件
如果你在启用 RTL 之前已经安装了组件，可以按下面的方式通过 CLI 迁移：
Run the migrate command
[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.
手动迁移（可选）
以下组件不会被 CLI 自动迁移。请参考每个组件的 RTL 支持部分，手动完成迁移。
迁移图标
某些图标，比如 ArrowRightIcon 或 ChevronLeftIcon，可能需要使用 rtl:rotate-180 类才能正确翻转。把 rtl:rotate-180 类添加到图标组件上即可。
<ArrowRightIcon className="rtl:rotate-180" />添加 direction 组件
将 direction 组件添加到你的项目中。
添加 DirectionProvider
请根据你所使用框架的文档，将 DirectionProvider 组件添加到项目中。
有关如何添加 DirectionProvider 组件的更多细节，请参阅 开始使用 部分。