Building a Component Registry: Install Any Component in Seconds
Most component kits are all-or-nothing. Clone the repo, get everything, figure out what you need. Bounce Kit takes a different approach with a component registry.
The Registry Concept
Instead of shipping a monolithic package, we expose each component as an installable unit:
npx bouncekit@latest add buttonThis installs just the button — its source code, styles, and dependencies — directly into your project. You own the code.
How It Works
1. Registry Definition
Each component is registered with its metadata:
{
name: "button",
tier: "free",
dependencies: ["class-variance-authority", "@radix-ui/react-slot"],
files: [{ path: "src/components/ui/button.tsx", type: "component" }],
}
2. Build Script
npm run registry:build reads the registry definition and generates JSON files for the registry:
{
"name": "button",
"files": [{ "path": "button.tsx", "content": "..." }],
"dependencies": ["class-variance-authority"]
}
3. API Route
The JSON files are served from /r/[name].json, making them accessible to the Bounce CLI.
Free vs Pro Components
The registry has a tier system:
- Free — 27 UI primitives, installable by anyone
- Pro — full component set, requires a license key
This drives conversions: developers try free components, love the quality, and upgrade to Pro.
Why Registries Win
- Try before you buy — free components build trust
- No lock-in — you own the source code
- Selective installation — only add what you need
- Familiar tooling — works with the Bounce CLI, one command to install
The registry model is the future of component distribution.