DEV Community

Alex Spinov
Alex Spinov

Posted on

shadcn/ui CLI Has a Free API: Here's How to Build Custom Component Libraries Programmatically

#javascript #webdev #react #tutorial

What is shadcn/ui CLI?

shadcn/ui has become the most popular component library approach in the React ecosystem. Unlike traditional libraries, shadcn/ui gives you actual source code — copy-paste components you own and customize.

But most developers don't know that shadcn/ui has a powerful CLI and registry API that lets you programmatically manage components, themes, and entire design systems.

The Free Registry API

shadcn/ui exposes a public registry at https://ui.shadcn.com/registry that returns component metadata, dependencies, and source code.

Fetch Available Components 

curl -s https://ui.shadcn.com/registry/index.json | jq '.[0:5]'
Enter fullscreen mode Exit fullscreen mode

Response:

[
  {"name": "accordion", "dependencies": ["@radix-ui/react-accordion"], "type": "components:ui"},
  {"name": "alert", "dependencies": [], "type": "components:ui"},
  {"name": "alert-dialog", "dependencies": ["@radix-ui/react-alert-dialog"], "type": "components:ui"}
]
Enter fullscreen mode Exit fullscreen mode

Get Component Source Code 

curl -s https://ui.shadcn.com/registry/styles/default/button.json | jq
Enter fullscreen mode Exit fullscreen mode

This returns the full component source, dependencies, and Tailwind config — everything you need to add the component to your project.

CLI Power Features

1. Batch Install Components 

npx shadcn@latest add button card dialog sheet table
Enter fullscreen mode Exit fullscreen mode

Install multiple components in one command — the CLI resolves all dependencies automatically.

2. Initialize a New Project 

npx shadcn@latest init
Enter fullscreen mode Exit fullscreen mode

This sets up:

  • components.json config file
  • Tailwind CSS configuration
  • CSS variables for theming
  • Utility functions (cn helper)

3. Diff Components Against Registry 

npx shadcn@latest diff button
Enter fullscreen mode Exit fullscreen mode

See what changed between your local component and the latest registry version.

Build a Custom Component Registry

The real power is building your own registry:

// registry.json
{
  "name": "my-company-ui",
  "styles": [
    {
      "name": "default",
      "label": "Default"
    }
  ],
  "components": [
    {
      "name": "branded-button",
      "files": ["branded-button.tsx"],
      "dependencies": ["class-variance-authority"]
    }
  ]
}
Enter fullscreen mode Exit fullscreen mode

Then your team installs from YOUR registry:

npx shadcn@latest add branded-button --registry https://your-company.com/registry
Enter fullscreen mode Exit fullscreen mode

Automate Design System Updates 

const { execSync } = require("child_process");
const components = ["button", "card", "dialog", "input", "label"];

for (const comp of components) {
  try {
    const diff = execSync(`npx shadcn@latest diff ${comp}`, { encoding: "utf-8" });
    if (diff.trim()) {
      console.log(`⚠️ ${comp} has updates available`);
    }
  } catch (e) {
    console.log(`✅ ${comp} is up to date`);
  }
}
Enter fullscreen mode Exit fullscreen mode

Real-World Use Case

A design systems team at a fintech company used the registry API to:

  1. Build a custom registry with 50+ branded components
  2. Auto-deploy updates via CI/CD
  3. Every team pulls from the internal registry — consistent UI across 12 apps

Result: 80% less time spent on component inconsistencies.

Quick Start 

# Start a new Next.js project with shadcn/ui
npx create-next-app@latest my-app
cd my-app
npx shadcn@latest init
npx shadcn@latest add button card
Enter fullscreen mode Exit fullscreen mode

You're building with production-ready, accessible components in under 2 minutes.

Need a custom component library or design system automation? I build developer tools and scrapers that save teams hours of manual work.

📧 spinov001@gmail.com
🔧 Check out my tools on Apify Store

What component library approach do you use? Drop a comment below!

Top comments (0)