CLI and registry
Caliper UI installs with the shadcn CLI. Free parts need one command and nothing else; Pro parts need a token set up once per project.
Free parts
Nothing to set up. Run the command from any component page:
npx shadcn@latest add https://caliperui.site/r/date-range-picker.jsonFiles land in components/ui/ with their stylesheets, packages are installed, and the first install adds Caliper UI’s tokens and base styles under styles/caliper/. Import those once in your global CSS; see Installation.
Parts share some files, such as button.tsx and its stylesheet. A later install skips the ones you have not changed and asks before replacing one you edited; answer no to keep your version.
Pro access
Pro parts come from a private registry. Set it up once per project:
- Sign in with the email you bought with and create an access token on your account page. It is shown once.
- Put it in
.env.localasCALIPER_TOKEN=clp_…and keep that file out of version control. - Add the registry to
components.json, so the CLI sends your token:
{
"registries": {
"@caliper": {
"url": "https://caliperui.site/r/{name}.json",
"headers": { "Authorization": "Bearer ${CALIPER_TOKEN}" }
}
}
}Then every Pro page’s command works as is:
npx shadcn@latest add @caliper/app-frame @caliper/dashboard-screenWithout a token, Pro items answer 401; with a token but no active licence, 403. Revoking a token on the account page stops it at once. Team owners give seats to teammates, who then create their own tokens.
Registry files
The index is https://caliperui.site/r/registry.json; each part is https://caliperui.site/r/<name>.json. You can read them with any tool that understands the shadcn registry format.