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.
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.
Related Products
on GumroadDevToolkit Starter Kit
A ready-to-deploy developer tools website with 12 built-in tools. Astro + Preact + Tailwind. Deploy to Cloudflare Pages for free. Built-in SEO, dark mode, and ad-ready layout.
Buy on Gumroad →DevPlaybook Interview Vault
210+ real technical interview questions with model answers, asked at Google, Meta, Amazon, Microsoft, Stripe, and Shopify. Covers Frontend (55), Backend (55), System Design (50), and DSA (50). Available in English and Traditional Chinese.
Buy on Gumroad →TypeScript Quick Reference Toolkit
5 practical reference files for TypeScript developers: cheatsheet, TS vs JS comparison, 20 utility types with real examples, tsconfig best practices template, and 15 common mistakes guide. Print it. Keep it on your desk.
Buy on Gumroad →You Might Also Need
UUID Generator
Free UUID generator. Generate UUID v1 (time-based), v4 (cryptographically random), or v5 (SHA-1 name-based) in bulk. Multiple output formats: standard, UPPERCASE, no-hyphens, braces. Pro: generate up
Open free tool →
UUID v7 Generator
Generate UUID v7 — the timestamp-ordered UUID format from RFC 9562. Sortable, database-friendly, ideal for distributed systems. Also generates UUID v4, ULID, nanoid. Extract timestamps from UUID v7. Runs in your browser.
Open free tool →
TanStack Query Config Builder
Configure TanStack Query (React Query v5) staleTime and gcTime visually. Generate QueryClient config and useQuery/useMutation TypeScript code with retry logic.
Open free tool →
More Free Tools
Related Articles
shadcn/ui: The Complete Component Library Guide for 2026
Complete guide to shadcn/ui covering installation across Next.js, Vite, Remix, and Astro, theming with CSS variables, new 2025-2026 components, customization patterns, registry system, and comparison with Radix/MUI/Ant Design.
shadcn/ui vs Radix UI vs Headless UI vs Ark UI: The Definitive React Component Library Comparison 2026
An in-depth 2026 comparison of shadcn/ui, Radix UI, Headless UI, and Ark UI — covering customization, accessibility, bundle size, TypeScript support, and which library fits your React project best.
Building a Custom shadcn/ui Registry: Share Components Across Projects
Learn how to build and host a custom shadcn/ui component registry in 2026. Covers registry.json format, CLI installation, versioning, monorepo patterns, and when to choose a registry over npm packages.
ShadCN UI vs Radix UI vs Headless UI: Complete Component Library Guide 2026
In-depth comparison of ShadCN UI, Radix UI, and Headless UI for React in 2026 — customization, accessibility, bundle size, TypeScript support, and which to pick for your project.
API Mocking for Frontend Development: Complete Guide (2025)
How to use API mocking to develop frontend apps without a real backend. Covers MSW, JSON Server, mock services in Postman, browser-based mock APIs, and testing strategies.
Enjoying this tool? Get more like it.
Weekly developer tool guides, productivity playbooks & AI tricks. Free. No spam.
Unlock AI-Powered Dev Tools
- ⚡ AI Code Review, Doc Generator & SQL Builder
- ⚡ All premium templates & early access
- ⚡ Member discounts on Gumroad products
$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.
MIT licensed · Instant download · No subscription
See what's included → Browse all deals →