Installation
CleverUI distributes through the shadcn registry: a one-off, two-line registration, then every component is one CLI command away. The source lands in your repo, no package to keep updated, no lock-in.
1. Register the registry
Add the @cleverui namespace to your project's components.json:
No components.json yet? Run npx shadcn@latest init first, it sets up Tailwind, the cn() helper, and the config file.
2. Add any component
Install by name with your package manager of choice, the CLI copies the source into your project and resolves npm dependencies automatically. Using Spotlight Card as the example:
pnpm dlx shadcn@latest add @cleverui/card-spotlightRequires the @cleverui registry in your components.json, a one-off, two-line setup.
Prefer copy-paste or an AI agent?
Copy-paste
Every component page shows the full source under its Code tab. Copy it into your project, install the listed dependencies, and you are done, the only assumption is the shadcn cn() helper.
AI agents
Each component page includes an agent prompt with the registry setup, install command, and full props API, paste it into Claude Code, Cursor, or Copilot and the agent wires the component in for you.
Frequently asked questions
Do I need shadcn/ui installed first?
You need a project initialised with the shadcn CLI (npx shadcn@latest init) so components.json, Tailwind, and the cn() helper exist. You do not need any shadcn components installed, CleverUI components only assume the cn() utility.
Does installing a component add a package dependency?
No package named CleverUI ever enters your package.json. The CLI copies the component source into your project and installs only its real npm dependencies (for example motion or lucide-react). The code is yours from that point.
Which frameworks does this work with?
Any React project the shadcn CLI supports, Next.js, Vite, Remix, Astro, and more. Components are client components written in TypeScript with Tailwind CSS classes over standard design tokens.