apps/v4/content/docs/changelog/2026-01-rtl.mdx
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.
<ComponentPreview styleName="base-nova" name="alert-rtl" direction="rtl" previewClassName="h-auto sm:h-72 p-6" />
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.
<ComponentPreview styleName="base-nova" name="card-rtl" direction="rtl" previewClassName="h-auto" />
New projects: Use the --rtl flag with init or create to enable RTL from the start.
npx shadcn@latest init --rtl
npx shadcn@latest create --rtl
Existing projects: Migrate your components with the migrate rtl command.
npx shadcn@latest migrate rtl
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.