FeaturesHow it worksPricingDocsBlogFAQ
Try for free

Blog

shadcn registries explained: installing blocks you own

What a shadcn registry actually is, what happens when you run npx shadcn add, how namespaces and private registries work, and why agents like them.

August 12, 2026 · Initium Team · 6 min read

Almost everything written about the shadcn registry system is written for people who want to publish one. That leaves the more common situation underexplained: you found a block library, the install command starts with npx shadcn@latest add, and you would like to know what that command is actually about to do to your repo.

This post is the consumer-side explainer. What a registry is, what happens during an install, what the @namespace prefix means, and why this distribution model turns out to be a good fit for coding agents.

What is a shadcn registry?

The official docs describe the registry system as a distribution system for code. A registry can distribute components, hooks, pages, config files, rules, and other files to any project, and it is not limited to React (shadcn/ui docs).

Mechanically, a registry is a set of JSON files served over HTTP. There is an index (registry.json) that lists what the registry offers, and one JSON file per item. Each item describes itself with a name, a type (registry:ui, registry:block, and so on), the source files it carries, and the dependencies it needs. Registry authors generate these files with npx shadcn@latest build, which flattens the source into static JSON, typically served from /r/ on the author's domain (getting started guide).

That is the whole infrastructure. No package server, no lockfile entries, no publish pipeline. Any URL that serves valid registry JSON is a registry, which is why the ecosystem is decentralized: shadcn/ui runs one, and so can anyone else.

How is this different from installing an npm package?

An npm package lives in node_modules. You import it, you don't edit it, and the maintainer controls what next week's version looks like. A registry item is the opposite: the CLI fetches the item's JSON, reads the source files inside it, and writes them into your project as plain files. A hero section lands in your components directory as a .tsx file you can open, rename, and rewrite.

The practical consequences:

  • You own the code. There is no dependency to update or get broken by. After the install, the files are yours, versioned in your git history like everything else you wrote.
  • Customization is editing, not configuration. You change a block by changing the file. No wrapper components, no theme override APIs.
  • The tradeoff is real. There are no automatic updates. If the registry author improves a block later, you either re-add the item and reconcile it with your edits, or keep your version.

If you have ever vendored a dependency deliberately, the model is familiar. Registries make vendoring the default and give it tooling.

What happens when you run npx shadcn add?

Take a concrete command:

npx shadcn@latest add @initium/hero-section-1

The CLI resolves the name to a URL, fetches the item JSON, and then walks its dependency tree before writing anything. Registry items declare two kinds of dependencies:

  • dependencies: npm packages the item needs, installed with your package manager as usual.
  • registryDependencies: other registry items, referenced by name (button) or by address on another registry (@acme/data-table).

Dependencies can cross registries. A block on one registry can depend on a primitive from another, and the CLI sorts the whole graph so items install in the right order and files aren't written twice (namespace docs). This is why installing one hero section can legitimately bring a button, a media component, and a couple of utility files with it: the block declared them, and the CLI resolved them.

Where files land is controlled by your components.json aliases, so a registry item written for one project layout installs cleanly into yours.

What does the @namespace prefix mean?

The @initium in the command above is a namespace: a shorthand you map to a URL template in your components.json. The {name} placeholder gets replaced with the item name at install time:

{
  "registries": {
    "@acme": "https://registry.acme.com/r/{name}.json"
  }
}

With that entry, npx shadcn@latest add @acme/button resolves to https://registry.acme.com/r/button.json. Namespaces are decentralized. There is no central authority handing them out; a namespace means whatever your components.json says it means.

Paid and private registries use the object form, which supports headers with environment variable expansion. This is how the Initium registry is configured:

{
  "registries": {
    "@initium": {
      "url": "https://app.initium.sh/r/styles/{style}/{name}.json",
      "headers": {
        "Authorization": "Bearer ${INITIUM_LICENSE_KEY}"
      }
    }
  }
}

The ${INITIUM_LICENSE_KEY} is read from your .env.local at install time, so the key never lives in a committed file. The same pattern covers company-internal registries behind a token. Setup details for this specific registry are in the registry setup docs.

How do you inspect an item before installing it?

Since a registry install writes files into your repo, it is worth looking before you run add. The CLI ships inspection commands (getting started guide):

# what does this registry offer?
npx shadcn@latest list https://registry.acme.com/r/registry.json

# what exactly is in this item: files, dependencies, targets?
npx shadcn@latest view @acme/login-form

view prints the item's full payload, including every file it will write and every dependency it will pull. For a registry you haven't used before, one view tells you more than the marketing page: how the code is structured, whether it drags in packages you don't want, and whether the author's conventions match yours.

Why do registries work so well with agents?

Registries turned out to be a natural fit for AI coding agents, for a reason worth understanding: the registry item is structured data. An agent doesn't have to scrape a docs site or guess at an import path. It can search a registry, read an item's description and dependency list, and install it with one deterministic command.

shadcn/ui ships an MCP server that packages exactly this. It connects your assistant to any registry configured in components.json, so prompts like "find me a login form and add it" resolve through real registry data rather than the model's memory (MCP docs). Setup for Claude Code is one command:

npx shadcn@latest mcp init --client claude

There is a second-order effect here. Because installed blocks are plain files in your repo, the agent can also edit them after installing, and that is where quality gets decided. An agent with access to good blocks still needs rules for how to use them: which sections to combine, how much headline it may write, when to stop adding. That layer is what agent skills are for, and it's covered in what agent skills are and, end to end, in the zero-to-website walkthrough.

What to check before adopting a third-party registry

A short, boring checklist, in order of importance:

  1. Read one item with view before installing anything. Code quality is visible in the payload.
  2. Check the dependency footprint. Good registry items lean on your existing stack; suspicious ones pull a package per feature.
  3. Confirm the license covers your use. Registry items are source files in your repo, so the license question is about code ownership, not package usage.
  4. Install one free or trivial item first. It verifies your components.json wiring and shows you where files land before you commit to a page's worth of blocks.

Registries reward this diligence more than npm does, because whatever you install becomes code you maintain.

Where to go from here

The fastest way to make all of this concrete is to install something. The first block in every Initium marketing category is free and installs without a key, together with everything it depends on:

npx shadcn@latest add @initium/hero-section-1

Browse the blocks library to pick one, or start from the registry setup guide if your components.json isn't wired up yet. Ten minutes of installing and reading the files that arrive will teach you more about the registry model than any explainer, this one included.

Build a site that looks designed

Initium gives your coding agent the blocks, style presets, and skills behind everything on this blog.

Try for free

More from the blog

shadcnai-workflow

From zero to a full website with Initium: a walkthrough

Blank folder to deployed marketing site: shadcn init, the Initium registry, a style preset, strategy files, blocks, and the prompts that keep it designed.

6 min read

shadcnlanding-pages

Why AI-built marketing sites look generated (and how to fix it)

Coding agents ship layouts fast, but the result reads as template soup. Here is what actually makes a marketing site look designed — and how Initium encodes it.

1 min read

landing-pagesshadcn

How to structure a SaaS landing page, section by section

A section order for a SaaS landing page, the reasoning behind each position, and how to assemble the page from shadcn blocks without padding it.

6 min read

On this page

  • What is a shadcn registry?
  • How is this different from installing an npm package?
  • What happens when you run npx shadcn add?
  • What does the @namespace prefix mean?
  • How do you inspect an item before installing it?
  • Why do registries work so well with agents?
  • What to check before adopting a third-party registry
  • Where to go from here

Build a site that looks designed

Initium gives your coding agent the blocks, style presets, and skills behind everything on this blog.

Try for free

Plan it once. Build it right.

Stop handing AI a blank prompt. Give it your style, strategy and blocks, and let it build a site that looks designed, not generated.

Get lifetime access

Copyright © 2026 Matt Wierzbicki

Product

  • Features
  • Pricing
  • Style editor
  • Blocks browser

Resources

  • Docs
  • Blog
  • Changelog
  • FAQ

Legal

  • Privacy Policy
  • Terms of Service
  • License Agreement