Skip to main content

shadcn/ui Registry Builder

Build a custom shadcn/ui registry entry. Define your component's files, dependencies, and registry type — then get the JSON and install command to share components across your projects.

✓ 5 registry types ✓ npm & dev dependencies ✓ Ready-to-use install command

Frequently Asked Questions

What is a shadcn/ui custom registry?▼

A custom registry lets you host your own shadcn/ui-compatible components that can be installed with the same `npx shadcn@latest add` CLI command. Instead of publishing to npm, you host a JSON file describing your component — its files, dependencies, and configuration. Teams use custom registries to share design system components across multiple projects.

What's the difference between registry:ui, registry:component, and registry:block?▼

registry:ui is for primitive UI components (buttons, inputs, cards) that are installed into your components/ui/ folder. registry:component is for more complex, opinionated components that use registry:ui primitives. registry:block is for full page sections or layouts. registry:lib is for utility functions. registry:hook is for React hooks.

Where should I host my registry?▼

Host it as static JSON files on any CDN or web server. Common options: (1) Vercel — deploy a Next.js app that serves the JSON, (2) GitHub Pages — push JSON files to a gh-pages branch, (3) Cloudflare Pages — cheap and fast global CDN, (4) Your own domain with a /r/ path (e.g. yoursite.com/r/component-name.json). The URL just needs to return valid JSON.

How do registryDependencies work?▼

registryDependencies lists other shadcn/ui components your component depends on. When a user installs your component, the CLI automatically installs these dependencies too. For example, if your data-table uses a Button component, list 'button' in registryDependencies. Use the official shadcn/ui component names (lowercase slugs).

Can I use a custom registry in a monorepo?▼

Yes. Set up one registry package in your monorepo (e.g. packages/ui/registry/) and have all apps reference it. You can serve it locally during development with `npx serve ./registry` and use a deployed URL in production. The CLI also supports local file:// URLs for development.

Share this tool: X / Twitter LinkedIn
✓ 60,000+ developers use DevPlaybook ★★★★★ 4.8 / 5 on Gumroad ✓ MIT licensed · Instant download ✓ No login required

Related Products

on Gumroad

You Might Also Need

More Free Tools

UUID Generator UUID v7 Generator TanStack Query Config Builder React Native StyleSheet Generator Cron Expression Builder curl Command Builder GraphQL Query Builder Packer Machine Image Builder Guide System Prompt Builder Expo App Config Generator CSP Policy Builder Developer Resume Builder URL Parser & Builder Makefile Generator Elasticsearch Query Builder MongoDB Aggregation Builder Docker Run Command Builder CSS Container Query Builder Redis Pipeline Builder Ansible Playbook Builder REST API Request Builder Terraform Variable Builder Content Security Policy Builder LLM JSON Schema Builder Nomad Job Spec Builder Terraform Variable Generator OpenTelemetry Trace Builder Grafana Dashboard JSON Builder AWS IAM Policy Generator Kubernetes RBAC Builder Zustand Store Builder SWR Config Generator Jotai Atom Explorer React Component Generator Neon DB Query Builder Core Web Vitals Guide Image Optimizer Checklist API Key Generator AI SQL Builder — Pro Tool API Request Builder Cron Expression Generator CSS Animation Generator Docker Compose Generator ESLint Config Generator Git Cheatsheet Interactive Git Command Builder Git Commit Message Generator HTTP Methods Reference Interview Question Generator JWT Builder Prompt Template Builder README Generator Dockerfile Generator Kubernetes Manifest Generator Terraform Resource Generator Helm Values Generator PWA Manifest Generator HTTP Mock Response Builder CSP Header Builder DNS Record Builder CORS Policy Builder Grafana Dashboard JSON Validator ASCII Table Builder JSON Schema Form Builder Redis Connection String Builder HTTP Cache-Control Builder GraphQL Fragment Generator TypeScript tsconfig.json Generator package.json Generator Dockerfile Linter NATS Connection String Builder Service Worker Cache Strategy Generator Playwright E2E Test Generator Sentry DSN Config Builder JavaScript Memory Leak Detector Cron Expression Validator nginx Config Builder Helm Values Builder Open Source License Picker Jest Testing Framework Guide Vitest Guide — Vite-native Testing Playwright E2E Testing Guide Cypress Frontend Testing Guide Storybook Component Development Guide Mock Service Worker (MSW) API Mocking Guide AWS CDK Infrastructure as Code Guide Pulumi Modern IaC Guide Ansible Configuration Management Guide HashiCorp Vault Secrets Management Guide HashiCorp Consul Service Mesh Guide Prisma Schema Builder Drizzle Schema Generator Redis Command Cheatsheet API Response Mocker AI Pipeline DAG Builder ABI Encoder/Decoder Pulumi Stack Config Generator Vault Policy Generator ArgoCD Application Generator Docker Layer Optimizer Docker Image Size Analyzer HTTP Cache Header Builder Bezier Curve Editor LangGraph Workflow Visualizer CrewAI Agent Config Generator Multi-Agent Orchestration Planner GraphQL Client Configurator Axios Interceptor Builder LangChain PromptTemplate Builder API Test Case Generator Mobile Safe Area Calculator TypeScript Discriminated Union Builder Resource Hints Generator SQL Window Functions Builder

Related Articles

Enjoying this tool? Get more like it.

Weekly developer tool guides, productivity playbooks & AI tricks. Free. No spam.

DevPlaybook Pro 7 days free

Unlock AI-Powered Dev Tools

  • ⚡ AI Code Review, Doc Generator & SQL Builder
  • ⚡ All premium templates & early access
  • ⚡ Member discounts on Gumroad products
Start Free Trial →

$9/mo after trial · Cancel anytime

Want the full toolkit?

Get DevPlaybook Pro

Every template, guide, boilerplate, and automation script in one bundle. 13 premium products — grab them all at once and save big.

$79
$241 separately Save $162 (67% off)
Get DevPlaybook Pro — $79 →

MIT licensed · Instant download · No subscription

See what's included → Browse all deals →