caliper uidocs

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:

Terminal
npx shadcn@latest add https://caliperui.site/r/date-range-picker.json

Files 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:

  1. Sign in with the email you bought with and create an access token on your account page. It is shown once.
  2. Put it in .env.local as CALIPER_TOKEN=clp_… and keep that file out of version control.
  3. Add the registry to components.json, so the CLI sends your token:
components.json
{
  "registries": {
    "@caliper": {
      "url": "https://caliperui.site/r/{name}.json",
      "headers": { "Authorization": "Bearer ${CALIPER_TOKEN}" }
    }
  }
}

Then every Pro page’s command works as is:

Terminal
npx shadcn@latest add @caliper/app-frame @caliper/dashboard-screen

Without 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.