caliper ui

Interface parts,
finished to one spec.

Components, blocks and complete product screens for React. Every state designed, every key handled, installed as source you own.

npx shadcn@latest add https://caliperui.site/r/button.json
try
your-app
  • app/
  • components/
  • ui/
  • dialog.tsx
  • button.tsxadded
  • toast.tsx
  • styles/
  • tokens.css

components/ui/button.tsx added

Press it: pending, then done, on the same control.

button.tsx
tsx
<Button  loading={pending}  onClick={onSend}>  Send invite</Button>

From the registry to a file you own.

  1. Search

    • Hold to confirmActions
    • Confirm morphActions
    • DialogOverlays
  2. Terminal
    bash
    npx shadcn@latest add https://caliperui.site/r/hold-to-confirm.json# Checking registry.# Installing dependencies.# Created components/ui/hold-to-confirm.tsx
# or, in Claude Code or Cursor through the MCP server:# "add a hold to confirm button to the API keys page"

  3. hold-to-confirm.tsx
    tsx
    export function HoldToConfirm({  label = "Hold to confirm",  duration = 1000, // was 1500  onConfirm,}: HoldToConfirmProps) {

  4. tokens.css

    light · comfortable
    dark · compact

    One tokens.css. No theme provider, no wrapper API.

  5. Checks

    • LoadingKeeps its width, focus and accessible name.
    • EmptyExplains the scope and offers the next step.
    • ErrorNames the problem and keeps what you typed.
    • DisabledStill readable, still reads as a control.
    • Long contentWraps or truncates without breaking layout.
    • Reduced motionSame meaning, no movement.

Complete screens, built from the same parts.

Pro screens use only the free components, so they match the rest of your app. Each one does one thing better than a generic page.

Itemises the next invoice and names the cost on every action.

billing-screen.tsx · sample data
Billing

Billing

Team plan · billed monthly · renews 1 November

Usage this period

Seats

14 / 20

Within limit

Build minutes

3,120 / 5,000

About $57 extra at this pace.

Within limit

Storage

41 / 50 GB

Within limit

Next invoice

$666.71

Charged 1 November

Team plan · 14 seats × $32
$448.00
Build minutes overage (projected)
$57.00
2 seats added mid-period
$46.00
VAT 21%
$115.71
Visa ending 4242Expires 10/26, before this invoice

Invoices

  • INV-2041September · Paid$672.00
  • INV-1987August · Retrying 12 Oct$624.00
  • INV-1932July · Paid$624.00

Accessible is how it ships.

  • Contrast

    Building it yourself: Checked per screen, usually in light mode only.

    With Caliper UI: AA for text and 3:1 for boundaries and focus, checked per token in both themes.

  • Keyboard

    Building it yourself: Added after the mouse version works.

    With Caliper UI: Every control works without a mouse; menus and dialogs return focus to what opened them.

  • Screen readers

    Building it yourself: Busy and result states often go unannounced.

    With Caliper UI: Names, busy states and results are announced where they happen.

  • Reduced motion

    Building it yourself: Animations switched off, meaning lost with them.

    With Caliper UI: Every motion has a still version that keeps its meaning.

  • Touch

    Building it yourself: Desktop hit areas on a phone.

    With Caliper UI: 44 px targets on touch screens, in both densities.

Start free. Pay once for the screens.

One payment, no subscription. Checkout by Dodo Payments; VAT and sales tax are handled.

  • Free

    For any project, commercial or not.

    $0

    Free forever · MIT licence

    Browse components
    • 293 components, blocks and pages
    • The source in your repo, yours to change
    • Docs, registry and MCP server
    • Light and dark, two densities

  • ProLaunch price

    For one developer shipping products.

    $99Regular price $159

    One-time payment · updates included

    Get Pro

    Everything in Free, plus

    • 233 Pro parts
    • 32 product screens and 6 app templates, including CRM, helpdesk and finance suites
    • Every future Pro release
    • Unlimited personal, client and SaaS products

  • Team

    For studios and teams of up to 5.

    $199

    One-time payment · $40 per person

    Buy for a team

    Everything in Pro, plus

    • 5 named seats
    • Move a seat when someone leaves
    • One receipt for the whole team

Compare every plan on the pricing page.

Install your first part. It takes one command.

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

No account needed for the free parts.