shadcn/ui 组件对从右到左 (RTL) 的布局提供一流支持。文本对齐、定位和方向样式会自动适应阿拉伯语、希伯来语和波斯语等语言。
🌐 shadcn/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.
当你安装组件时，CLI 会自动将物理定位类转换为逻辑等效类，因此你的组件可以在从左到右（LTR）和从右到左（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
选择你的框架以开始使用 RTL 支持。
🌐 Select your framework to get started with RTL support.
它是如何运作的
🌐 How it works
当你在 components.json 中添加设置了 rtl: true 的组件时，shadcn CLI 会自动将类和属性转换为支持 RTL：
🌐 When you add components with rtl: true set in your components.json, the shadcn CLI automatically transforms classes and props to be RTL compatible:
- 像
left-*和right-*这样的物理定位类被转换为像start-*和end-*这样的逻辑等价类。 - 方向属性已更新为使用逻辑值。
- 文本对齐和间距类已相应调整。
- 支持的图标会自动使用
rtl:rotate-180翻转。
试试看
🌐 Try it out
点击下面的链接以在 v0 中打开支持 RTL 的 Next.js 项目。
🌐 Click the link below to open a Next.js project with RTL support in v0.
支持的样式
🌐 Supported Styles
通过 CLI 的自动 RTL 转换仅适用于使用带有新样式（base-nova、radix-nova 等）的 shadcn create 创建的项目。
🌐 Automatic RTL transformation via the CLI is only available for projects created using shadcn create with the new styles (base-nova, radix-nova, etc.).
有关其他样式，请参见 迁移指南。
🌐 For other styles, see the Migration Guide.
字体推荐
🌐 Font Recommendations
为了获得最佳的从右到左阅读体验，我们建议使用对目标语言有良好支持的字体。Noto 是一个很好的字体系列，它与 Inter 和 Geist 搭配得很好。
🌐 For the best RTL experience, we recommend using fonts that have proper support for your target language. Noto is a great font family for this and it pairs well with Inter and Geist.
请查阅你的框架的 RTL 指南，详见 入门，了解安装和配置 RTL 字体的详细信息。
🌐 See your framework's RTL guide under Get Started for details on installing and configuring RTL fonts.
动画
🌐 Animations
CLI 还处理动画类，自动将物理方向动画转换为其逻辑等效动画。例如，slide-in-from-right 变为 slide-in-from-end。
🌐 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.
关于 tw-animate-css 的说明：
tw-animate-css 库存在一个已知问题，其中逻辑滑动工具无法按预期工作。目前，请确保将 dir 属性传递给门户元素。
🌐 There is a known issue 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.
<Popover>
<PopoverTrigger>Open</PopoverTrigger>
<PopoverContent dir="rtl">
<div>Content</div>
</PopoverContent>
</Popover><Tooltip>
<TooltipTrigger>Open</TooltipTrigger>
<TooltipContent dir="rtl">
<div>Content</div>
</TooltipContent>
</Tooltip>迁移现有组件
🌐 Migrating existing components
如果在启用 RTL 之前已经安装了现有组件，可以使用 CLI 按如下方式迁移它们：
🌐 If you have existing components installed before enabling RTL, you can migrate them using the CLI as follows:
运行迁移命令
pnpm dlx shadcn@latest migrate rtl [path]
[path] 接受要迁移的路径或通配符模式。如果你不提供路径，它将迁移 ui 目录中的所有文件。
手动迁移（可选）
🌐 Manual Migration (Optional)
以下组件不会被 CLI 自动迁移。请按照每个组件的 RTL 支持部分手动迁移它们。
🌐 The following components are not automatically migrated by the CLI. Follow the RTL support section for each component to manually migrate them.
迁移图标
🌐 Migrate Icons
有些图标，如 ArrowRightIcon 或 ChevronLeftIcon，可能需要 rtl:rotate-180 类才能正确翻转。向图标组件添加 rtl:rotate-180 类以正确翻转它。
🌐 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.
<ArrowRightIcon className="rtl:rotate-180" />添加方向组件
🌐 Add direction component
将方向组件添加到你的项目中。
🌐 Add the direction component to your project.
pnpm dlx shadcn@latest add direction
添加 DirectionProvider
🌐 Add DirectionProvider
请参阅你的框架文档了解如何将 DirectionProvider 组件添加到你的项目中。
🌐 Follow your framework's documentation for details on how to add the DirectionProvider component to your project.
请参阅 入门 部分，了解如何将 DirectionProvider 组件添加到你的项目中。
🌐 See the Get Started section for details on how to add the DirectionProvider component to your project.