shadcn/ui

Turn any public GitHub repository into a shadcn registry.

You can now turn any public GitHub repository into a registry.

Add a registry.json file at the root of the repository, define the items you want to distribute, and users can install them directly from GitHub with the shadcn CLI.

pnpm dlx shadcn@latest add <username>/<repo>/<item>

For example, to install the project-conventions item from the acme/toolkit repository:

pnpm dlx shadcn@latest add acme/toolkit/project-conventions

GitHub registries are source registries. You do not need to run shadcn build, publish generated item JSON files or set up a registry server. The CLI reads the root registry.json, resolves include entries, finds the requested item and installs the files declared by that item.

Distribute anything

Registry items are not limited to components. A GitHub registry can distribute components, hooks, utilities, design tokens, feature kits, project conventions, agent instructions, testing setup, CI workflows, release workflows, templates, codemods, migration kits and other project files.

For example, a repository can expose a project-conventions item that installs shared docs, editor settings and agent instructions:

{
  "$schema": "https://ui.shadcn.com/schema/registry.json",
  "name": "acme-toolkit",
  "homepage": "https://github.com/acme/toolkit",
  "items": [
    {
      "name": "project-conventions",
      "type": "registry:item",
      "files": [
        {
          "path": "AGENTS.md",
          "type": "registry:file",
          "target": "~/AGENTS.md"
        },
        {
          "path": ".editorconfig",
          "type": "registry:file",
          "target": "~/.editorconfig"
        },
        {
          "path": "docs/conventions.md",
          "type": "registry:file",
          "target": "~/docs/conventions.md"
        }
      ]
    }
  ]
}

Commands

GitHub registry addresses work with the same commands as other registry addresses.

List items from a GitHub registry:

pnpm dlx shadcn@latest list acme/toolkit

Search items:

pnpm dlx shadcn@latest search acme/toolkit --query conventions

View an item:

pnpm dlx shadcn@latest view acme/toolkit/project-conventions

Install an item:

pnpm dlx shadcn@latest add acme/toolkit/project-conventions

See the GitHub Registries docs for the full guide.

Inline shadcn/tailwind.css and remove the shadcn dependency.

When we added support for both Radix and Base UI, we needed a place for shared Tailwind utilities that both libraries depend on, e.g. custom variants like data-open: and data-closed: and utilities like no-scrollbar.

We also ran into a few bugs while working on RTL support that were easier to fix in one shared place rather than duplicating across every component.

So we created shadcn/tailwind.css. When you run init, it adds @import "shadcn/tailwind.css" to your global CSS file. It works just like other CSS imports such as tw-animate-css: a small dependency that is tree-shaken in production and resolved at build time.

If you prefer not to depend on the shadcn package for that CSS, we've added the shadcn eject command. It inlines shadcn/tailwind.css into your global CSS file and removes the shadcn dependency from your project.

pnpm dlx shadcn@latest eject

Before

@import "tailwindcss";
@import "tw-animate-css";
@import "shadcn/tailwind.css";

After

@import "tailwindcss";
@import "tw-animate-css";
/* ejected from shadcn@4.8.3 */
@theme inline {
  @keyframes accordion-down {
    from {
      height: 0;
    }
    to {
      height: var(
        --radix-accordion-content-height,
        var(--accordion-panel-height, auto)
      );
    }
  }
}

@custom-variant data-open {
  &:where([data-state="open"]),
  &:where([data-open]:not([data-open="false"])) {
    @slot;
  }
}

In a monorepo, run the command from the workspace that contains your components.json and global CSS file:

pnpm dlx shadcn@latest eject -c packages/ui

See the CLI documentation for more details.

A more compact Luma. Smaller spacing. Denser surfaces. Built for focused product interfaces.

Introducing Rhea, a new shadcn/ui style. A more compact Luma. Smaller spacing. Denser surfaces. Built for focused product interfaces.

Try Rhea in shadcn/create

Rhea started from a simple request we've heard a lot: Luma, but more compact. We looked at how people were using the new styles and what they were asking for, and the pattern was clear. A lot of teams wanted the softness and shape of Luma with tighter spacing, smaller controls, and more information density.

Rhea keeps the same rounded foundation, but makes it more compact for product interfaces where space matters. Buttons, inputs, menus, cards, and lists all sit a little tighter so the UI can carry more without feeling crowded.

Why a new style?

We considered making this a spacing tweak for Luma, but --spacing is a multiplier. Changing it would change what familiar utilities mean across your app. p-2, w-4, and m-16 would no longer mean the same size.

That tradeoff felt wrong. Compactness should not force you to relearn Tailwind's spacing scale or wonder whether a utility means something different in one style than another.

So Rhea is a new style instead. It lets us adjust component sizes, gaps, and density directly while keeping the underlying utility scale predictable.

Available now in shadcn/create for both Radix and Base UI.

Try Rhea

Organize and validate source registries.

This release adds two updates for registry authors:

• include for composing large source registries from multiple registry.json files.
• shadcn registry validate for checking source registries before publishing.

This makes it easier to maintain source and dynamic registries without keeping one large registry.json file by hand.

Registry authors can now organize a large source registry across multiple registry.json files and compose them with shadcn build.

registry.json
components
└── ui
    ├── button.tsx
    ├── input.tsx
    └── registry.json
hooks
├── registry.json
├── use-media-query.ts
└── use-toggle.ts

registry.json

{
  "$schema": "https://ui.shadcn.com/schema/registry.json",
  "name": "acme",
  "homepage": "https://acme.com",
  "include": [
    "components/ui/registry.json",
    "hooks/registry.json"
  ]
}

Included registry.json files are valid registry files for composition and may omit name and homepage. Only the root registry.json must define the registry metadata.

components/ui/registry.json

{
  "$schema": "https://ui.shadcn.com/schema/registry.json",
  "items": [
    {
      "name": "button",
      "type": "registry:ui",
      "files": [
        {
          "path": "button.tsx",
          "type": "registry:ui"
        }
      ]
    }
  ]
}

Build output

shadcn build resolves included registries and writes a flattened registry.json without include. Item file paths are preserved from the root registry, so a file declared in components/ui/registry.json is written as components/ui/button.tsx in the built registry item.

Validate your registry

You can now validate a source registry before publishing or serving it.

pnpm dlx shadcn registry validate

Validation runs against the source registry files directly. You do not need to run shadcn build first.

The command checks the root registry.json, included registry files, item schema errors, duplicate item names, include rules, and local item file paths. Validation reports all actionable errors it can find in one run.

Registry loaders

The shadcn/registry package also exports loadRegistry and loadRegistryItem for dynamic registry routes.

app/r/registry.json/route.ts

import { loadRegistry } from "shadcn/registry"

export async function GET() {
  const registry = await loadRegistry()

  return Response.json(registry)
}

app/r/[name].json/route.ts

import { loadRegistryItem } from "shadcn/registry"

export async function GET(
  _: Request,
  { params }: { params: Promise<{ name: string }> }
) {
  const { name } = await params
  const item = await loadRegistryItem(name)

  return Response.json(item)
}

See the registry.json documentation and getting started guide for more details.

Configure shadcn/ui with package.json imports and portable registry target aliases.

We've added support for package imports and aliases in files.target in shadcn@4.7.0.

Package imports#

The shadcn CLI now supports package.json#imports for installing components, rewriting imports, and resolving third-party registries. You can use private #... import aliases from your package.json instead of relying only on compilerOptions.paths in tsconfig.json.

package.json

{
  "imports": {
    "#components/*": "./src/components/*.tsx",
    "#lib/*": "./src/lib/*.ts",
    "#hooks/*": "./src/hooks/*.ts"
  }
}

Then use the same roots in components.json:

components.json

{
  "aliases": {
    "components": "#components",
    "ui": "#components/ui",
    "lib": "#lib",
    "hooks": "#hooks",
    "utils": "#lib/utils"
  }
}

This also works in monorepos where app-local files use package imports and shared UI files are imported from workspace package exports.

See the package imports guide for setup details.

Target aliases#

Registry items can now use target aliases in files[].target to install files under the user's configured shadcn directories. For example, the following registry item will install the prompt-input.tsx file under the ui/ai directory.

example.json

{
  "files": [
    {
      "path": "registry/default/ai/prompt-input.tsx",
      "type": "registry:ui",
      "target": "@ui/ai/prompt-input.tsx"
    }
  ]
}

See the registry examples for more details.

Decode, share, open, and resolve preset codes from the shadcn CLI.

We added shadcn preset commands for working with preset codes.

Decode a preset#

You can decode a preset code to see exactly what it contains:

pnpmnpmyarnbun

pnpm dlx shadcn@latest preset decode b5owWMfJ8l

Copy

Copy<span data-line=""><span>Preset</span></span> <span data-line=""><span> code b5owWMfJ8l</span></span> <span data-line=""><span> version b</span></span> <span data-line=""><span> style mira</span></span> <span data-line=""><span> baseColor mauve</span></span> <span data-line=""><span> theme mauve</span></span> <span data-line=""><span> chartColor amber</span></span> <span data-line=""><span> iconLibrary hugeicons</span></span> <span data-line=""><span> font inter</span></span> <span data-line=""><span> fontHeading oxanium</span></span> <span data-line=""><span> radius large</span></span> <span data-line=""><span> menuAccent subtle</span></span> <span data-line=""><span> menuColor inverted-translucent</span></span> <span data-line=""><span> url https://ui.shadcn.com/create?preset=b5owWMfJ8l</span></span>

Resolve from a project#

Use preset resolve in an existing project to see the preset that matches your current configuration.

pnpmnpmyarnbun

pnpm dlx shadcn@latest preset resolve

Copy

Copy<span data-line=""><span>Preset</span></span> <span data-line=""><span> code b5Kc6P0Vc</span></span> <span data-line=""><span> version b</span></span> <span data-line=""><span> style luma</span></span> <span data-line=""><span> baseColor olive</span></span> <span data-line=""><span> theme lime</span></span> <span data-line=""><span> chartColor sky</span></span> <span data-line=""><span> iconLibrary hugeicons</span></span> <span data-line=""><span> font geist</span></span> <span data-line=""><span> fontHeading inherit</span></span> <span data-line=""><span> radius default</span></span> <span data-line=""><span> menuAccent subtle</span></span> <span data-line=""><span> menuColor default</span></span> <span data-line=""><span> url https://ui.shadcn.com/create?preset=b5Kc6P0Vc</span></span>

It works with monorepos too:

pnpmnpmyarnbun

pnpm dlx shadcn@latest preset resolve -c apps/web

Copy

Share or open#

Use preset url when you need a shareable link:

pnpmnpmyarnbun

pnpm dlx shadcn@latest preset url b5owWMfJ8l

Copy

Copy<span data-line=""><span>https://ui.shadcn.com/create?preset=b5owWMfJ8l</span></span>

Use preset open to open the preset on shadcn/create for customization:

pnpmnpmyarnbun

pnpm dlx shadcn@latest preset open b5owWMfJ8l

Copy

Copy<span data-line=""><span>Opening https://ui.shadcn.com/create?preset=b5owWMfJ8l in your browser.</span></span>

This makes presets easier to inspect, share, and hand off to coding agents without manually decoding codes or building URLs.

Add cursor pointer behavior for buttons during project setup.

You can now enable cursor: pointer for buttons when initializing a project.

pnpmnpmyarnbun

pnpm dlx shadcn@latest init --pointer

Copy

This adds the following CSS to your global CSS file:

globals.css

Copy<span data-line=""><span style="--shiki-dark:#F97583;--shiki-light:#CF222E">@layer</span><span style="--shiki-dark:#E1E4E8;--shiki-light:#1F2328"> base {</span></span> <span data-line=""><span style="--shiki-dark:#85E89D;--shiki-light:#116329"> button</span><span style="--shiki-dark:#B392F0;--shiki-light:#0550AE">:not</span><span style="--shiki-dark:#E1E4E8;--shiki-light:#1F2328">(</span><span style="--shiki-dark:#B392F0;--shiki-light:#0550AE">:disabled</span><span style="--shiki-dark:#E1E4E8;--shiki-light:#1F2328">),</span></span> <span data-line=""><span style="--shiki-dark:#E1E4E8;--shiki-light:#1F2328"> [</span><span style="--shiki-dark:#B392F0;--shiki-light:#0550AE">role</span><span style="--shiki-dark:#F97583;--shiki-light:#CF222E">=</span><span style="--shiki-dark:#9ECBFF;--shiki-light:#0A3069">"button"</span><span style="--shiki-dark:#E1E4E8;--shiki-light:#1F2328">]</span><span style="--shiki-dark:#B392F0;--shiki-light:#0550AE">:not</span><span style="--shiki-dark:#E1E4E8;--shiki-light:#1F2328">(</span><span style="--shiki-dark:#B392F0;--shiki-light:#0550AE">:disabled</span><span style="--shiki-dark:#E1E4E8;--shiki-light:#1F2328">) {</span></span> <span data-line=""><span style="--shiki-dark:#79B8FF;--shiki-light:#0550AE"> cursor</span><span style="--shiki-dark:#E1E4E8;--shiki-light:#1F2328">: </span><span style="--shiki-dark:#79B8FF;--shiki-light:#0550AE">pointer</span><span style="--shiki-dark:#E1E4E8;--shiki-light:#1F2328">;</span></span> <span data-line=""><span style="--shiki-dark:#E1E4E8;--shiki-light:#1F2328"> }</span></span> <span data-line=""><span style="--shiki-dark:#E1E4E8;--shiki-light:#1F2328">}</span></span>

The --pointer option is not part of preset codes. It is applied as a project setup option, similar to --rtl.

Apply only the theme or fonts from a preset while keeping your existing components.

You can now selectively apply a preset.

Say someone shares a preset with you and you already have your own components, but you like the theme or the fonts. Now you can apply just that.

Keep your components. Apply only what you want.

# Apply the full preset.
npx shadcn@latest apply --preset b2D0vQ7G4

# Apply only the theme.
npx shadcn@latest apply --preset b2D0vQ7G4 --only theme

# Apply only the fonts.
npx shadcn@latest apply --preset b2D0vQ7G4 --only font

# Apply theme and fonts.
npx shadcn@latest apply --preset b2D0vQ7G4 --only theme,font

The default behavior is unchanged. Running shadcn apply --preset <preset> still applies the full preset.

Partial preset apply currently supports theme and font.

Minimal. Editorial. Typographic. Underline Controls and Uppercase Headings. Shaped by Print Design Principles.

Introducing Sera, a new shadcn/ui style. Minimal. Editorial. Typographic. Underline Controls and Uppercase Headings. Shaped by Print Design Principles.

Sera is a typography-first style built on print design principles. It pairs serif headings with sans-serif body text, uses square corners, uppercase tracking, and underlined controls to create an editorial feel for your app.

Like the other new styles, Sera goes beyond theming. It changes the geometry, spacing, and feel of the components so your app starts from a different visual baseline.

Available now in shadcn/create for both Radix and Base UI.

Try Sera

Deploy your shadcn/ui app on Vercel

Trusted by OpenAI, Sonos, Adobe, and more.

Vercel provides tools and infrastructure to deploy apps and features at scale.

Deploy to Vercel

Built by shadcn at Vercel. The source code is available on GitHub.

Copy Page

Switch presets in existing projects without starting over.

We added shadcn apply so you can switch presets in an existing project without starting over.

When you run npx shadcn@latest apply in an existing project, we apply a new preset, reinstall your existing components, and update your theme, colors, CSS variables, fonts, and icons.

pnpmnpmyarnbun

pnpm dlx shadcn@latest apply --preset b2D0vQ7G4

Copy

The CLI keeps the current base and RTL settings from your existing project, even when the preset URL was generated with different values.

[

Try a Preset

](/create)

Composition sections across component pages—structured trees that help you and your agents build correct UI.

We've added Composition sections across the component docs so you can see the correct structure at a glance: what wraps what, which subcomponents belong together, and how to avoid invalid nesting.

Card
├── CardHeader
│   ├── CardTitle
│   ├── CardDescription
│   └── CardAction
├── CardContent
└── CardFooter

Why we added this#

We've found that LLMs and coding agents compose elements more reliably when they can see the full structure: fewer missing wrappers, fewer wrong hierarchies, better matches to the examples.

Bring docs into your agent#

You or your LLM can pull the same component documentation, including composition, usage, and examples, into context from the CLI:

pnpm dlx shadcn@latest docs card

If you're using the shadcn/skills, this is done automatically for you.

Rounded geometry. Soft elevation. Breathable layouts. Inspired by macOS Tahoe, minus the glass.

Introducing Luma, a new shadcn/ui style. Rounded geometry. Soft elevation. Breathable layouts. Inspired by macOS Tahoe, minus the glass.

Luma is a new foundation for your next app. It gives components softer surfaces, more open spacing, and a calmer visual rhythm while keeping the same shadcn/ui workflow.

Like the other new styles, Luma goes beyond theming. It changes the geometry, spacing, and feel of the components so your app starts from a different visual baseline.

Available now in shadcn/create for both Radix and Base UI.

Try Luma

More capable, easier to use. Built for you and your coding agents. Skills, presets, dry run, new templates, monorepo and more.

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.

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

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

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:

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

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.

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.

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.

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:

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

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.

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.

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

5 New Visual Styles

We're starting with 5 new visual styles, designed to help your UI actually feel like your UI.

• Vega – The classic shadcn/ui look.
• Nova – Reduced padding and margins for compact layouts.
• Maia – Soft and rounded, with generous spacing.
• Lyra – Boxy and sharp. Pairs well with mono fonts.
• Mira – Compact. Made for dense interfaces.

Beyond Theming

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.

Component Library Options

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.

Supported Frameworks

Now available for Next.js, Vite, TanStack Start and v0.

Get Started

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.