2026 年 1 月 - RTL 支持
shadcn CLI 现在通过自动把物理 CSS 类转换为逻辑等价类来支持 RTL（从右到左）布局。
shadcn/ui 现在对从右到左（RTL）布局提供一等公民级支持。你的组件会自动适配阿拉伯语、希伯来语和波斯语等语言。
这不仅适用于 shadcn/ui 组件，也适用于通过 shadcn registry 分发的任何组件。
تم الدفع بنجاح
تمت معالجة دفعتك البالغة 29.99 دولارًا. تم إرسال إيصال إلى عنوان بريدك الإلكتروني.
ميزة جديدة متاحة
لقد أضفنا دعم الوضع الداكن. يمكنك تفعيله في إعدادات حسابك.
我们对 RTL 的处理方式
传统上，支持 RTL 的组件库会直接把逻辑类内置进去。这意味着每个人都得使用 ms-4 和 start-2 这样的类，即使他们只是在为 LTR 布局开发。
我们采用了不同的方法。shadcn CLI 会在安装时转换类，因此只有在真正需要时你才会看到逻辑类。如果你不是在构建 RTL 项目，你仍然可以使用 ml-4 和 left-2 这样的熟悉类。启用 RTL 后，CLI 会帮你完成转换。
你不需要在真正需要之前就学习 RTL。
它是如何工作的
当你在 components.json 中把组件设置为 rtl: true 时，CLI 会自动把 ml-4 和 text-left 这样的物理 CSS 类转换成 ms-4 和 text-start 这样的逻辑等价类。
left-*和right-*这类物理定位类会变成start-*和end-*。ml-*和pr-*这类外边距与内边距类会变成ms-*和pe-*。text-left这类文本对齐类会变成text-start。- 方向性属性会更新为逻辑值。
- 支持的图标会通过
rtl:rotate-180自动翻转。 slide-in-from-left这类动画会变成slide-in-from-start。
每个组件的 RTL 示例
我们已经为每个组件添加了 RTL 示例。你可以在每个 组件页面 上找到实时预览和代码。
CLI 更新
新项目：在 init 或 create 命令中使用 --rtl 参数，即可从一开始启用 RTL。
现有项目：使用 migrate rtl 命令迁移你的组件。
这会把 ui 目录中的所有组件转换为使用逻辑类。你也可以传入具体路径或 glob 模式。
试试看
点击下面的链接，在 v0 中打开一个支持 RTL 的 Next.js 项目。
