New

January 2026 - RTL Support

The sd-ui CLI now supports RTL (right-to-left) layouts by automatically converting physical CSS classes to logical equivalents.

StyleDriven 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 StyleDriven UI components as well as any component distributed on the sd-ui registry.

"use client"

import * as React from "react"

Our approach to RTL

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 sd-ui 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.

How it works

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.

  • Physical positioning classes like left-* and right-* become start-* and end-*.
  • Margin and padding classes like ml-* and pr-* become ms-* and pe-*.
  • Text alignment classes like text-left become text-start.
  • Directional props are updated to use logical values.
  • Supported icons are automatically flipped using rtl:rotate-180.
  • Animations like slide-in-from-left become slide-in-from-start.

RTL examples for every component

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 updates

New projects: Use the --rtl flag with init or create to enable RTL from the start.

pnpm dlx shadcn@latest init --rtl
pnpm dlx shadcn@latest create --rtl

Existing projects: Migrate your components with the migrate rtl command.

pnpm dlx 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.

Try it out

Click the link below to open a Next.js project with RTL support in v0.

Open in v0

Links