Caliper UI vs shadcn/ui
How Caliper UI differs from shadcn/ui, when each is the better choice, and how they work together. Caliper UI is independent and not affiliated with shadcn/ui.
The short answer
shadcn/ui gives you primitives and leaves the product decisions to you. Caliper UI uses the same install model and gives you finished parts and screens. Both put source in your repo and both install with the shadcn CLI. Choose shadcn/ui to build your own design system, and Caliper UI to ship product screens without designing every state.
Side by side
| shadcn/ui | Caliper UI | |
|---|---|---|
| Install | npx shadcn@latest add button | npx shadcn@latest add @caliper/button |
| Who owns the code | You: source in your repo | You: source in your repo |
| Scope | Primitives, charts and example blocks | 116 free parts, 602 Pro parts and blocks, 43 screens, 8 templates |
| States | Yours to design per product | Loading, empty, error, disabled and long content are designed into the parts |
| Styling | Your theme on shared CSS variables | One token system, with a stylesheet per part |
| Requirements | Works across React frameworks | React 19, Tailwind CSS 4 and a bundler that handles CSS imports |
| For AI tools | Its own docs and MCP server | llms.txt, Markdown docs and an MCP server |
| Cost | Free, open source | Free parts are MIT. Pro is $199 once, Team is $499 once for up to 10 developers |
| Community | Very large | Small and new |
When shadcn/ui is the better choice
You are building a design system of your own, you want the smallest possible starting point, or you need the largest community and the most third-party examples. It is also free for everything.
When Caliper UI is the better choice
You need billing, data grids, schedulers, settings or AI interfaces soon, and you want them to look like one product. Every part follows one token system, and keyboard behaviour, focus return and reduced motion are already handled.
Using both in one project
Caliper UI installs into the same components/ui/ folder, so a part with the same name as yours, such as button.tsx, replaces it. The CLI asks before overwriting. Start with a part you do not have yet, and read Installation for the global CSS it needs.
Questions
Is Caliper UI a fork of shadcn/ui?
No. Caliper UI is a separate library that shares the install model and the shadcn CLI. Overlays use Radix primitives, and everything else is plain React and CSS.
Is Caliper UI free?
116 parts are free under the MIT licence. Pro costs $199 once for one developer, and Team costs $499 once for up to 10. A year of updates is included, and renewing is optional.
Does Caliper UI work with Claude Code and Cursor?
Yes. It publishes llms.txt, a Markdown version of every docs page and an MCP server, so AI editors can search the catalogue and install parts.