The shadcn CLI now supports RTL (right-to-left) layouts by automatically converting physical CSS classes to logical equivalents.
shadcn/ui now has first-class support for right-to-left (RTL) layouts. Your components automatically adapt for languages like Arabic, Hebrew, and Persian.
This works with the shadcn/ui components as well as any component distributed on the shadcn registry.
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.
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.
You don't have to learn RTL until you need it.
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-* and right-* become start-* and end-*.ml-* and pr-* become ms-* and pe-*.text-left become text-start.rtl:rotate-180.slide-in-from-left become slide-in-from-start.We've added RTL examples for every component. You'll find live previews and code on each component page.
New projects: Use the --rtl flag with init or create to enable RTL from the start.
Existing projects: Migrate your components with the migrate rtl command.
This transforms all components in your ui directory to use logical classes. You can also pass a specific path or glob pattern.
Click the link below to open a Next.js project with RTL support in v0.
此内容由惯性聚合(RSS阅读器)自动聚合整理，仅供阅读参考。 原文来自 — 版权归原作者所有。