Changelog

All blocks are now available for both Radix and Base UI.

• All blocks for both libraries - Every block, including login, signup, sidebar and dashboard blocks, is now available in both Radix and Base UI variants.
• Same CLI workflow - Run npx shadcn add and the CLI will pull the correct block variant based on your project configuration.

If you've already set up your project with npx shadcn create, blocks will automatically use your chosen library. No additional configuration needed.

pnpmnpmyarnbun
pnpm dlx shadcn@latest add login-01
Copy

Browse the full collection on the blocks page.

The new-york style now uses the unified radix-ui package instead of individual @radix-ui/react-* packages.

What's Changed

When you add components using the new-york style, they will now import from radix-ui instead of separate packages:

Copy- import * as DialogPrimitive from "@radix-ui/react-dialog"
+ import { Dialog as DialogPrimitive } from "radix-ui"

This results in a cleaner package.json with a single radix-ui dependency instead of multiple @radix-ui/react-* packages.

Migrating Existing Projects

If you have an existing project using the new-york style, you can migrate to the new radix-ui package using the migrate command:

pnpmnpmyarnbun
pnpm dlx shadcn@latest migrate radix
Copy

This will update all imports in your UI components and add radix-ui to your dependencies.

To migrate components outside of your ui directory, use the path argument:

pnpmnpmyarnbun
pnpm dlx shadcn@latest migrate radix src/components/custom
Copy

Once complete, you can remove any unused @radix-ui/react-* packages from your package.json.

See the migrate radix documentation for more details.

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.

"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 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.

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.

pnpmnpmyarnbun
pnpm dlx shadcn@latest init --rtl
Copy

pnpmnpmyarnbun
pnpm dlx shadcn@latest create --rtl
Copy

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

pnpmnpmyarnbun
pnpm dlx shadcn@latest migrate rtl
Copy

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.

Links

• RTL Documentation
• Font Recommendations
• Animations
• Migrating Existing Components
• Next.js Setup
• Vite Setup
• TanStack Start Setup

We've updated the styles for Base UI components to support inline-start and inline-end side values. The following components now support these values:

• Tooltip
• Popover
• Combobox
• Context Menu
• Dropdown Menu
• Hover Card
• Menubar
• Select

What Changed

We added new Tailwind classes to handle the logical side values:

Copy<PopoverPrimitive.Popup
  className={cn(
    "... data-[side=bottom]:slide-in-from-top-2
    data-[side=left]:slide-in-from-right-2
    data-[side=right]:slide-in-from-left-2
    data-[side=top]:slide-in-from-bottom-2
+   data-[side=inline-start]:slide-in-from-right-2
+   data-[side=inline-end]:slide-in-from-left-2 ...",
    className
  )}
/>

Usage

Copy<Popover>
  <PopoverTrigger>Open</PopoverTrigger>
  <PopoverContent side="inline-start">
    {/* Opens on the left in LTR, right in RTL */}
  </PopoverContent>
</Popover>

LLM Prompt

Ask your LLM to update your components by running the following prompt:

CopyAdd inline-start and inline-end support to my shadcn/ui components. Add the following Tailwind classes to each component:
 
| File | Component | Add Classes |
|------|-----------|-------------|
| tooltip.tsx | TooltipContent | `data-[side=inline-start]:slide-in-from-right-2 data-[side=inline-end]:slide-in-from-left-2` |
| tooltip.tsx | TooltipArrow | `data-[side=inline-start]:top-1/2! data-[side=inline-start]:-right-1 data-[side=inline-start]:-translate-y-1/2
data-[side=inline-end]:top-1/2! data-[side=inline-end]:-left-1 data-[side=inline-end]:-translate-y-1/2` |
| popover.tsx | PopoverContent | `data-[side=inline-start]:slide-in-from-right-2 data-[side=inline-end]:slide-in-from-left-2` |
| hover-card.tsx | HoverCardContent | `data-[side=inline-start]:slide-in-from-right-2 data-[side=inline-end]:slide-in-from-left-2` |
| select.tsx | SelectContent | `data-[side=inline-start]:slide-in-from-right-2 data-[side=inline-end]:slide-in-from-left-2
data-[align-trigger=true]:animate-none` and add `data-align-trigger={alignItemWithTrigger}` attribute |
| combobox.tsx | ComboboxContent | `data-[side=inline-start]:slide-in-from-right-2 data-[side=inline-end]:slide-in-from-left-2` |
| dropdown-menu.tsx | DropdownMenuContent | `data-[side=inline-start]:slide-in-from-right-2 data-[side=inline-end]:slide-in-from-left-2` |
| context-menu.tsx | ContextMenuContent | `data-[side=inline-start]:slide-in-from-right-2 data-[side=inline-end]:slide-in-from-left-2` |
| menubar.tsx | MenubarContent | `data-[side=inline-start]:slide-in-from-right-2 data-[side=inline-end]:slide-in-from-left-2` |
 
Add these classes next to the existing `data-[side=top]`, `data-[side=bottom]`, `data-[side=left]`, `data-[side=right]` classes.

We've shipped full documentation for Base UI components.

When we launched npx shadcn create in December, we introduced the ability to choose between Radix and Base UI as your component library. Today, we're following up with complete documentation for all Base UI components.

What's New

• Full Base UI docs - Every component now has dedicated documentation for Base UI, covering usage, props, and examples.
• Rebuilt examples - All component examples have been rebuilt for both Radix and Base UI. Switch between them to see the implementation differences.
• Side-by-side comparison - The docs make it easy to compare how components work across both libraries.

Same Abstraction, Different Primitives

The goal remains the same: give you a consistent API regardless of which primitive library you choose. The components look and behave the same way. Only the underlying implementation changes.

Copy// Works the same whether you're using Radix or Base UI.
import { Dialog, DialogContent, DialogTrigger } from "@/components/ui/dialog"

If you're starting a new project, run npx shadcn create and pick your preferred library. The CLI handles the rest.