111k

Changelog

RSS

Latest updates and announcements.

March 2026 - shadcn/cli v4

We're releasing version 4 of shadcn/cli. More capable, easier to use. Built for you and your coding agents. Here's everything new.

shadcn/skills

shadcn/skills gives coding agents the context they need to work with your components and registry correctly. It covers both Radix and Base UI primitives, updated APIs, component patterns and registry workflows. The skill also knows how to use the shadcn CLI, when to invoke it and which flags to pass. Agents make fewer mistakes and produce code that actually matches your design system.

You can ask your agent things like:

  • "create a new vite monorepo"
  • "find me a hero from tailark, add it to the homepage, animate the text using an animation from react-bits"
  • "install and configure a sign in page from @clerk"
pnpm dlx skills add shadcn/ui

Introducing --preset

A preset packs your entire design system config into a short code. Colors, theme, icon library, fonts, radius. One string, everything included.

Build your preset on shadcn/create, preview it live and grab the code when you're ready.

pnpm dlx shadcn@latest init --preset a1Dg5eFl

Use it to scaffold projects from custom config, share with your team or publish in your registry. Drop it in prompts so your agent knows where to start. Use it across Claude, Codex, v0, Replit. Take your preset with you.

Switching presets

When you're working on a new app, it can take a few tries to find something you like so we've made switching presets really easy. Run init --preset in your app, and the CLI will take care of reconfiguring everything, including your components.

pnpm dlx shadcn@latest init --preset ad3qkJ7

Skills + Presets

Your agent knows how to use presets. Scaffold a project, switch design systems, try something new.

  • "create a new next app using --preset adtk27v"
  • "let's try --preset adtk27v"

New shadcn/create

To help you build custom presets, we rebuilt shadcn/create. It now includes a library of UI components you can use to preview your presets. See how your colors, fonts and radius apply to real components before you start building.

New --dry-run, --diff, and --view flags

Inspect what a registry will add to your project before anything gets written. Review the payload yourself or pipe it to your coding agent for a second look.

pnpm dlx shadcn@latest add button --dry-run
npx shadcn@latest add button --diff
npx shadcn@latest add button --view

Updating primitives

You can use the --diff flag to check for registry updates. Or ask your agent: "check for updates from @shadcn and merge with my local changes".

pnpm dlx shadcn@latest add button --diff

shadcn init --template

shadcn init now scaffolds full project templates for Next.js, Vite, Laravel, React Router, Astro and TanStack Start. Dark mode included for Next.js and Vite.

pnpm dlx shadcn@latest init

Select a template › - Use arrow-keys. Return to submit.
❯ Next.js
  Vite
  TanStack Start
  React Router
  Astro
  Laravel

Use --monorepo to set up a monorepo.

pnpm dlx shadcn@latest init -t next --monorepo

shadcn init --base

Pick your primitives. Use --base to start a project with Radix or Base UI.

pnpm dlx shadcn@latest init --base radix

shadcn info

The info command now shows the full picture: framework, version, CSS vars, which components are installed, and where to find docs and examples for every component. Great for giving coding agents the context they need to work with your project.

pnpm dlx shadcn@latest info

shadcn docs

Get docs, code and examples for any UI component right from the CLI. Gives your coding agent the context to use your primitives correctly.

pnpm dlx shadcn@latest docs combobox

combobox
  - docs      https://ui.shadcn.com/docs/components/radix/combobox
  - examples  https://raw.githubusercontent.com/shadcn-ui/ui/refs/heads/main/apps/v4/registry/bases/radix/examples/combobox-example.tsx
  - api       https://base-ui.com/react/components/combobox

registry:base and registry:font

Registries can now distribute an entire design system as a single payload using registry:base. Components, dependencies, CSS vars, fonts, config. One install, everything set up.

Fonts are now a first-class registry type. Install and configure them the same way you install components.

font-inter.json
{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "font-inter",
  "type": "registry:font",
  "font": {
    "family": "'Inter Variable', sans-serif",
    "provider": "google",
    "import": "Inter",
    "variable": "--font-sans",
    "subsets": ["latin"]
  }
}
pnpm dlx shadcn@latest add font-inter

February 2026 - Blocks for Radix and Base UI

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.

pnpm dlx shadcn@latest add login-01

Browse the full collection on the blocks page.

February 2026 - Unified Radix UI Package

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:

components/ui/dialog.tsx
- 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:

pnpm dlx shadcn@latest migrate radix

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:

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

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

See the migrate radix documentation for more details.

January 2026 - RTL Support

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.

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

January 2026 - Inline Start and End Styles

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:

<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

<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:

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