2026年1月 - RTL支持
shadcn CLI 现在支持 RTL（从右到左）布局，通过自动将物理 CSS 类转换为逻辑等效类。
shadcn/ui现在对从右到左（RTL）布局提供一流支持。你的组件会自动适应阿拉伯语、希伯来语和波斯语等语言。
🌐 shadcn/ui now has first-class support for right-to-left (RTL) layouts. Your components automatically adapt for languages like Arabic, Hebrew, and Persian.
这适用于 shadcn/ui 组件，以及 shadcn 注册表上分发的任何组件。
"use client"
import * as React from "react"我们对RTL的方法
🌐 Our approach to RTL
传统上，支持 RTL 的组件库自带内置的逻辑类。这意味着每个人都必须使用像 ms-4 和 start-2 这样的类，即使他们只为 LTR 布局构建。
🌐 Traditionally, component libraries that support RTL ship with logical classes baked in. This means everyone has to work with classes like ms-4 and start-2, even if they're only building for LTR layouts.
我们采取了不同的方法。shadcn CLI 在安装时会转换类，因此只有在真正需要时你才会看到逻辑类。如果你不为 RTL 构建，你可以使用熟悉的类，如 ml-4 和 left-2。当你启用 RTL 时，CLI 会为你处理转换。
🌐 We took a different approach. The shadcn CLI transforms classes at install time, so you only see logical classes when you actually need them. If you're not building for RTL, you work with familiar classes like ml-4 and left-2. When you enable RTL, the CLI handles the conversion for you.
你不必在需要之前学习 RTL。
它是如何运作的
🌐 How it works
当你在 components.json 中添加设置了 rtl: true 的组件时，CLI 会自动将像 ml-4 和 text-left 这样的物理 CSS 类转换为它们的逻辑等效类，如 ms-4 和 text-start。
🌐 When you add components with rtl: true set in your components.json, the CLI automatically converts physical CSS classes like ml-4 and text-left to their logical equivalents like ms-4 and text-start.
- 像
left-*和right-*这样的物理定位类变成了start-*和end-*。 - 像
ml-*和pr-*这样的 margin 和 padding 类变成了ms-*和pe-*。 - 像
text-left这样的文本对齐类变成text-start。 - 方向属性已更新为使用逻辑值。
- 支持的图标会自动使用
rtl:rotate-180翻转。 - 像
slide-in-from-left这样的动画会变成slide-in-from-start。
每个组件的RTL示例
🌐 RTL examples for every component
我们已经为每个组件添加了 RTL 示例。你可以在每个组件页面上查看实时预览和代码。
🌐 We've added RTL examples for every component. You'll find live previews and code on each component page.
"use client"
import * as React from "react"CLI 更新
🌐 CLI updates
新项目：使用 --rtl 标志与 init 或 create 结合，从一开始就启用 RTL。
pnpm dlx shadcn@latest init --rtl
pnpm dlx shadcn@latest create --rtl
现有项目：使用 migrate rtl 命令迁移你的组件。
pnpm dlx shadcn@latest migrate rtl
这会将 ui 目录中的所有组件转换为使用逻辑类。你也可以传入特定路径或通配符模式。
🌐 This transforms all components in your ui directory to use logical classes. You can also pass a specific path or glob pattern.
试试看
🌐 Try it out
点击下面的链接以在 v0 中打开支持 RTL 的 Next.js 项目。
🌐 Click the link below to open a Next.js project with RTL support in v0.
链接
🌐 Links