Changelog

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.

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

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

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

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:

Copy{
  "$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:

pnpmnpmyarnbun
pnpm dlx shadcn@latest list acme/toolkit
Copy

Search items:

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

View an item:

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

Install an item:

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

See the GitHub Registries docs for the full guide.

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.

pnpmnpmyarnbun
pnpm dlx shadcn@latest eject
Copy

Before

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

After

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

pnpmnpmyarnbun
pnpm dlx shadcn@latest eject -c packages/ui
Copy

See the CLI documentation for more details.

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.

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.

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

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

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

pnpmnpmyarnbun
pnpm dlx shadcn registry validate
Copy

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.

Copyimport { loadRegistry } from "shadcn/registry"
 
export async function GET() {
  const registry = await loadRegistry()
 
  return Response.json(registry)
}

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

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.

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

Then use the same roots in components.json:

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

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

See the registry examples for more details.