Minimal. Editorial. Typographic. Underline Controls and Uppercase Headings. Shaped by Print Design Principles.
Switch presets in existing projects without starting over.
Composition sections across component pages—structured trees that help you and your agents build correct UI.
Rounded geometry. Soft elevation. Breathable layouts. Inspired by macOS Tahoe, minus the glass.
More capable, easier to use. Built for you and your coding agents. Skills, presets, dry run, new templates, monorepo and more.
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:
pnpm dlx skills add shadcn/ui
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.
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
Your agent knows how to use presets. Scaffold a project, switch design systems, try something new.
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.
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
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 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
Pick your primitives. Use --base to start a project with Radix or Base UI.
pnpm dlx shadcn@latest init --base radix
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
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
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.
{
"$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
All blocks are now available for both Radix and Base UI.
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.
The new-york style now uses the unified radix-ui package instead of individual @radix-ui/react-* packages.
When you add components using the new-york style, they will now import from radix-ui instead of separate packages:
- 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.
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.
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.
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.
Click the link below to open a Next.js project with RTL support in v0.
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:
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
)}
/>
<Popover>
<PopoverTrigger>Open</PopoverTrigger>
<PopoverContent side="inline-start">
{/* Opens on the left in LTR, right in RTL */}
</PopoverContent>
</Popover>
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.
Full documentation for Base UI components.
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.
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.
// 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.
Customize everything. Pick your component library, icons, base color, theme, fonts and create your own version of shadcn/ui.
From the very first commit, the goal of shadcn/ui was to make it customizable. The idea is to give you solid defaults, spacing, color tokens, animations, accessibility, and then let you take it from there. Tweak the code. Add new components. Change the colors. Build your own version.
But somewhere along the way, all apps started looking the same. I guess the defaults were a little too good. My bad.
Today, we're changing that: npx shadcn create.
We're starting with 5 new visual styles, designed to help your UI actually feel like your UI.
Your config doesn't just change colors, it rewrites the component code to match your setup. Fonts, spacing, structure, even the libraries you use, everything adapts to your preferences.
The new CLI takes care of it all.
Start with a component library. Choose between Radix or Base UI.
We rebuilt every component for Base UI, keeping the same abstraction. They are fully compatible with your existing components, even those pulled from remote registries.
When you pull down components, we auto-detect your library and apply the right transformations.
Now available for Next.js, Vite, TanStack Start and v0.
A list of code registries you can browse and pull code and components from.
We just published the Registry Directory: a list of code registries you can browse and pull code and components from.
https://ui.shadcn.com/docs/directory
Built into the CLI. No config required.
Spinner, Kbd, Button Group, Input Group, Field, Item, and Empty components.
For this round of components, I looked at what we build every day, the boring stuff we rebuild over and over, and made reusable abstractions you can actually use.
These components work with every component library, Radix, Base UI, React Aria, you name it. Copy and paste to your projects.
An indicator to show a loading state. Can be used standalone or in buttons.
import { Spinner } from "@/components/ui/spinner"
<Spinner />
You can edit the code and replace it with your own spinner.
Kbd is a component that renders a keyboard key.
import { Kbd, KbdGroup } from "@/components/ui/kbd"
<Kbd>Ctrl</Kbd>
Use KbdGroup to group keyboard keys together.
<KbdGroup>
<Kbd>Ctrl</Kbd>
<Kbd>B</Kbd>
</KbdGroup>
You can add it to buttons, tooltips, input groups, and more.
A container that groups related buttons together with consistent styling. Great for action groups, split buttons, and more.
import { ButtonGroup } from "@/components/ui/button-group"
<ButtonGroup>
<Button>Button 1</Button>
<Button>Button 2</Button>
</ButtonGroup>
You can nest button groups to create more complex layouts with spacing.
<ButtonGroup>
<ButtonGroup>
<Button>Button 1</Button>
<Button>Button 2</Button>
</ButtonGroup>
<ButtonGroup>
<Button>Button 3</Button>
<Button>Button 4</Button>
</ButtonGroup>
</ButtonGroup>
Use ButtonGroupSeparator to create split buttons. Classic dropdown pattern.
You can also use it to add prefix or suffix buttons and text to inputs.
<ButtonGroup>
<ButtonGroupText>Prefix</ButtonGroupText>
<Input placeholder="Type something here..." />
<Button>Button</Button>
</ButtonGroup>
Input Group lets you add icons, buttons, and more to your inputs.
import {
InputGroup,
InputGroupAddon,
InputGroupInput,
} from "@/components/ui/input-group"
<InputGroup>
<InputGroupInput placeholder="Search..." />
<InputGroupAddon>
<SearchIcon />
</InputGroupAddon>
</InputGroup>
You can add buttons to the input group, text, labels, tooltips, and more. It also works with textareas for really complex components.
A component for building really complex forms. Works with all your form libraries: Server Actions, React Hook Form, TanStack Form, Bring Your Own Form.
import {
Field,
FieldDescription,
FieldError,
FieldLabel,
} from "@/components/ui/field"
<Field>
<FieldLabel htmlFor="username">Username</FieldLabel>
<Input id="username" placeholder="Max Leiter" />
<FieldDescription>
Choose a unique username for your account.
</FieldDescription>
</Field>
It works with all form controls: Inputs, textareas, selects, checkboxes, radios, switches, sliders, and more.
You can group fields together using FieldGroup and FieldSet. Perfect for multi-section forms.
<FieldSet>
<FieldLegend />
<FieldGroup>
<Field />
<Field />
</FieldGroup>
</FieldSet>
Making it responsive is easy. Use orientation="responsive" and it switches between vertical and horizontal layouts based on container width.
Wrap your fields in FieldLabel to create a selectable field group.
A straightforward flex container that can house nearly any type of content. Use it to display lists of items, cards, and more.
import {
Item,
ItemContent,
ItemDescription,
ItemMedia,
ItemTitle,
} from "@/components/ui/item"
<Item>
<ItemMedia variant="icon">
<HomeIcon />
</ItemMedia>
<ItemContent>
<ItemTitle>Dashboard</ItemTitle>
<ItemDescription>Overview of your account and activity.</ItemDescription>
</ItemContent>
</Item>
You can add icons, avatars, or images to the item. Use ItemGroup to display a list of items.
Use the asChild prop to render it as a link.
Use this to display empty states in your app.
import {
Empty,
EmptyContent,
EmptyDescription,
EmptyMedia,
EmptyTitle,
} from "@/components/ui/empty"
<Empty>
<EmptyMedia variant="icon">
<InboxIcon />
</EmptyMedia>
<EmptyTitle>No messages</EmptyTitle>
<EmptyDescription>You don't have any messages yet.</EmptyDescription>
<EmptyContent>
<Button>Send a message</Button>
</EmptyContent>
</Empty>
You can use it with avatars, input groups for things like search results or email subscriptions, and more.
An index of open source registries that you can install items from.
We've created an index of open source registries that you can install items from.
You can search, view and add items from the registry index without configuring the components.json file.
They'll be automatically added to your components.json file for you.
pnpm dlx shadcn add @ai-elements/prompt-input
The full list of registries is available at https://ui.shadcn.com/r/registries.json.
To add a registry to the index, submit a PR to the shadcn/ui repository. See the registry index documentation for more details.
Namespaced registries, advanced authentication, new commands and a completely rewritten registry engine.
Create registry items that can be distributed to any project.
Initialize projects and add components from local JSON files.
A new command to migrate to the new radix-ui package.
Upgraded Calendar component with React DayPicker and 30+ calendar blocks.
Upgraded ui.shadcn.com to Next.js 15.3 and Tailwind v4.