Installation

Add a part with one command. It brings its own files and stylesheet; your global CSS imports the foundation once.

Requirements

React 19, Tailwind CSS 4 and a bundler that handles CSS imports: Next.js App Router, Vite or React Router. Geist Sans and Geist Mono are used for text.

Add a part

Caliper UI works with the shadcn CLI. Free parts need no setup and no account:

Terminal

npx shadcn@latest add https://caliperui.site/r/button.json

The files land in components/ui/ with their packages. The first install also adds Caliper UI’s tokens and base styles under styles/caliper/. Every component page shows its own command; Pro parts need a one-time token setup, see Pro access.

Import the foundation once

app/globals.css

@import "tailwindcss";
@import "../styles/caliper/tokens.css";
@import "../styles/caliper/tailwind.css";
@import "../styles/caliper/base.css";

Paths are relative to your global CSS file; in a Vite app, src/index.css uses ./styles/caliper/….

Each part brings its own CSS

A part imports its stylesheet, so button.tsx starts with import "./button.css" and your app carries only the CSS for the parts you add. Rules several parts share sit in components/ui/shared/, imported by the parts that use them. All of it is yours to edit.

Next.js Pages Router only allows global CSS in pages/_app: move each part’s stylesheet import there.

Use a component

Usage example

import { Button } from "@/components/ui/button";

export function SaveNote({ pending }: { pending: boolean }) {
  return <Button loading={pending}>Save note</Button>;
}

Prefer to copy by hand? Every component page lists its files, stylesheets included, under Installation.