---
name: "@caliper"
slug: "caliper"
description: "React components, blocks and complete product screens drawn to one specification. Accessible by default, with every state designed. Free parts are MIT and install as source you own."
category: "Animated components"
tags: ["accessibility", "animation", "auth", "blocks", "buttons", "cards", "charts", "cms", "dashboard", "developer-tools", "forms", "loaders", "marketing", "media", "navigation", "overlays", "pro-available", "tables", "theming"]
framework: "react"
license: "MIT"
author: "sarmaasis"
website: "https://caliperui.site"
github: "https://github.com/sarmaasis/caliperui"
registry: "https://caliperui.site/r/registry.json"
pro: true
pro_url: "https://caliperui.site/docs/pro"
github_stars: 0
component_count: 93
generated_at: "2026-10-27T06:34:08.542Z"
---

# @caliper

React components, blocks and complete product screens drawn to one specification. Accessible by default, with every state designed. Free parts are MIT and install as source you own.

## Links

- Website: https://caliperui.site
- GitHub: https://github.com/sarmaasis/caliperui
- Registry JSON: https://caliperui.site/r/registry.json
- Directory page: https://sh4dcn.netlify.app/registry/caliper
- This file: https://sh4dcn.netlify.app/md/caliper.md
- Pro / pricing: https://caliperui.site/docs/pro

## Install

```sh
# add the whole registry (shadcn CLI)
npx shadcn@latest add https://caliperui.site/r/registry.json
pnpm dlx shadcn@latest add https://caliperui.site/r/registry.json
bunx shadcn@latest add https://caliperui.site/r/registry.json
# clone the source repo
git clone https://github.com/sarmaasis/caliperui.git
# fetch the raw registry index
curl -s https://caliperui.site/r/registry.json
```

## Components (93)

| name | type | description | install |
| --- | --- | --- | --- |
| styles | registry:style | Colour, radius, motion and density tokens, the Tailwind adapter and a small base stylesheet. Every part needs them; import them once in your global CSS. Each p… | `npx shadcn@latest add https://caliperui.site/r/styles.json` |
| about-template | registry:ui | Who is behind the product, in the order buyers and candidates check: the belief, how you got here, the numbers, how you work, the people and the next step. | `npx shadcn@latest add https://caliperui.site/r/about-template.json` |
| accordion | registry:ui | A stack of headings that each reveal their content, one open at a time. | `npx shadcn@latest add https://caliperui.site/r/accordion.json` |
| alert | registry:ui | An inline message that keeps context and recovery beside the work. | `npx shadcn@latest add https://caliperui.site/r/alert.json` |
| alert-dialog | registry:ui | The Dialog surface for a decision that cannot be undone: no close button, no outside dismiss, focus starting on the safe choice. | `npx shadcn@latest add https://caliperui.site/r/alert-dialog.json` |
| animated-counter | registry:ui | A number that counts to its value, with prefix, suffix and locale. | `npx shadcn@latest add https://caliperui.site/r/animated-counter.json` |
| aspect-ratio | registry:ui | A box that keeps a fixed ratio so images and video never shift the layout. | `npx shadcn@latest add https://caliperui.site/r/aspect-ratio.json` |
| auth-page | registry:ui | A centred sign-in or sign-up page with a brand header and legal links. | `npx shadcn@latest add https://caliperui.site/r/auth-page.json` |
| avatar | registry:ui | A person's photo, falling back to initials when there is no image. | `npx shadcn@latest add https://caliperui.site/r/avatar.json` |
| avatar-group | registry:ui | A compact stack of avatars with an overflow count and presence. | `npx shadcn@latest add https://caliperui.site/r/avatar-group.json` |
| badge | registry:ui | A small label for status, category or count. | `npx shadcn@latest add https://caliperui.site/r/badge.json` |
| bar-chart | registry:ui | A compact bar series with an accessible label. | `npx shadcn@latest add https://caliperui.site/r/bar-chart.json` |
| blog-grid | registry:ui | A grid of article cards with date, tag and summary. | `npx shadcn@latest add https://caliperui.site/r/blog-grid.json` |
| blog-post-template | registry:ui | One article at a reading measure: a progress line under the header, an outline that marks where you are, linkable headings, the author and three related posts. | `npx shadcn@latest add https://caliperui.site/r/blog-post-template.json` |
| breadcrumb | registry:ui | The path to the current page, with each parent linked. | `npx shadcn@latest add https://caliperui.site/r/breadcrumb.json` |
| button | registry:ui | A familiar action with immediate focus, a tactile press, and optional pending or label feedback that stays on the button itself. | `npx shadcn@latest add https://caliperui.site/r/button.json` |
| button-group | registry:ui | A toolbar of related tools in one raised shell; toggled tools sink into it. | `npx shadcn@latest add https://caliperui.site/r/button-group.json` |
| calendar | registry:ui | A month grid for choosing a day or a range, usable on its own or inside a picker. | `npx shadcn@latest add https://caliperui.site/r/calendar.json` |
| calendar-app | registry:ui | A full calendar: day, week, month and agenda, a month picker and calendar toggles, a now line, and events you create by dragging, move by dragging or with Alt … | `npx shadcn@latest add https://caliperui.site/r/calendar-app.json` |
| call-to-action | registry:ui | A closing band with one clear action. | `npx shadcn@latest add https://caliperui.site/r/call-to-action.json` |
| card | registry:ui | A titled container with media, status, meta and optional expandable details. | `npx shadcn@latest add https://caliperui.site/r/card.json` |
| changelog-template | registry:ui | What shipped, newest first: dates that stay in view, linkable versions, tag filters with a count and a product view per release. | `npx shadcn@latest add https://caliperui.site/r/changelog-template.json` |
| checkbox | registry:ui | A native checkbox with a clear checked, unchecked and indeterminate state. | `npx shadcn@latest add https://caliperui.site/r/checkbox.json` |
| chip-group | registry:ui | A set of toggleable chips for single or multiple choices. | `npx shadcn@latest add https://caliperui.site/r/chip-group.json` |
| collapsible | registry:ui | A single disclosure for optional detail. | `npx shadcn@latest add https://caliperui.site/r/collapsible.json` |
| combobox | registry:ui | A searchable select with grouped options and keywords. | `npx shadcn@latest add https://caliperui.site/r/combobox.json` |
| command-palette | registry:ui | A searchable list of destinations and actions opened from the keyboard. | `npx shadcn@latest add https://caliperui.site/r/command-palette.json` |
| contact-section | registry:ui | A contact form beside the ways to reach a team. | `npx shadcn@latest add https://caliperui.site/r/contact-section.json` |
| contact-template | registry:ui | A contact page that routes the message first: pick the topic and it says who answers and how soon. The form keeps what you typed if sending fails and confirms … | `npx shadcn@latest add https://caliperui.site/r/contact-template.json` |
| context-menu | registry:ui | A menu opened with a right-click or long press on a piece of content. | `npx shadcn@latest add https://caliperui.site/r/context-menu.json` |
| copy-button | registry:ui | Copies a value and confirms what was copied, with a fallback when the clipboard is blocked. | `npx shadcn@latest add https://caliperui.site/r/copy-button.json` |
| cta-block | registry:ui | The closing call to action: the promise again, one specific next step and a reassurance line. | `npx shadcn@latest add https://caliperui.site/r/cta-block.json` |
| data-table | registry:ui | Accessible table markup with consistent cell styling and a scrollable region. | `npx shadcn@latest add https://caliperui.site/r/data-table.json` |
| date-picker | registry:ui | A date field that opens a calendar, with min, max and today shortcuts. | `npx shadcn@latest add https://caliperui.site/r/date-picker.json` |
| date-range-picker | registry:ui | Choose a start and end date with preset ranges. | `npx shadcn@latest add https://caliperui.site/r/date-range-picker.json` |
| description-list | registry:ui | A record's details as label and value pairs, side by side when there is room, with copy and edit where the value sits. | `npx shadcn@latest add https://caliperui.site/r/description-list.json` |
| dialog | registry:ui | A modal window that asks for a decision or a short form, with focus kept inside. | `npx shadcn@latest add https://caliperui.site/r/dialog.json` |
| direction | registry:ui | Sets reading direction for everything inside it. Spacing, borders, affixes and the selected edge follow on their own; icons that point somewhere flip when mark… | `npx shadcn@latest add https://caliperui.site/r/direction.json` |
| donut-chart | registry:ui | Parts of a whole as a ring, with the total in the centre. | `npx shadcn@latest add https://caliperui.site/r/donut-chart.json` |
| drawer | registry:ui | A panel that slides in from the left or right for editing alongside the page. | `npx shadcn@latest add https://caliperui.site/r/drawer.json` |
| dropdown-menu | registry:ui | A menu of actions anchored to a trigger, with groups, shortcuts and separators. | `npx shadcn@latest add https://caliperui.site/r/dropdown-menu.json` |
| empty-state | registry:ui | A message with an icon and a next step for when there is nothing to show. | `npx shadcn@latest add https://caliperui.site/r/empty-state.json` |
| error-template | registry:ui | The pages people land on when something goes wrong, each with the way out that fits: search, ask for access, retry with a reference, wait out maintenance, reco… | `npx shadcn@latest add https://caliperui.site/r/error-template.json` |
| faq-block | registry:ui | Searchable questions with one answer open at a time, each linking to the exact doc, and a way to ask when nothing matches. | `npx shadcn@latest add https://caliperui.site/r/faq-block.json` |
| field | registry:ui | Wraps a control with its label, hint, error and optional action, wired for assistive tech. | `npx shadcn@latest add https://caliperui.site/r/field.json` |
| footer-block | registry:ui | The page's last word: link columns, a newsletter that confirms in place, the legal line, status and the name as a full-width wordmark. | `npx shadcn@latest add https://caliperui.site/r/footer-block.json` |
| hold-to-confirm | registry:ui | Hold to confirm, part of the Actions family. | `npx shadcn@latest add https://caliperui.site/r/hold-to-confirm.json` |
| hover-card | registry:ui | A preview card that appears when hovering or focusing a link or name. | `npx shadcn@latest add https://caliperui.site/r/hover-card.json` |
| input | registry:ui | A recessed text field with optional leading and trailing affixes; it never jumps when validation appears. | `npx shadcn@latest add https://caliperui.site/r/input.json` |
| kbd | registry:ui | Keys as small raised caps: one shortcut per kbd, ⌘ on a Mac and Ctrl elsewhere, with spoken names for symbols. | `npx shadcn@latest add https://caliperui.site/r/kbd.json` |
| label | registry:ui | The visible name for a field, tied to it so a click focuses the control. | `npx shadcn@latest add https://caliperui.site/r/label.json` |
| legal-template | registry:ui | A policy people can read: the short version first, numbered sections with an outline that follows you, linkable clauses, a change history and a print layout. | `npx shadcn@latest add https://caliperui.site/r/legal-template.json` |
| line-chart | registry:ui | One or more series over time, with hover readout and an optional band. | `npx shadcn@latest add https://caliperui.site/r/line-chart.json` |
| loader | registry:ui | A small indeterminate indicator in four shapes. | `npx shadcn@latest add https://caliperui.site/r/loader.json` |
| metric | registry:ui | A number with its context, change and a small trend line. | `npx shadcn@latest add https://caliperui.site/r/metric.json` |
| navigation-menu | registry:ui | A site header whose items open frosted panels of links. Hover waits for intent, the panel resizes from one item to the next, and every link is reachable by key… | `npx shadcn@latest add https://caliperui.site/r/navigation-menu.json` |
| newsletter-signup | registry:ui | An email field with consent and success states. | `npx shadcn@latest add https://caliperui.site/r/newsletter-signup.json` |
| not-found-page | registry:ui | A friendly 404 with suggestions and search. | `npx shadcn@latest add https://caliperui.site/r/not-found-page.json` |
| number-field | registry:ui | A numeric field with steppers, limits, a suffix and optional drag-to-scrub. | `npx shadcn@latest add https://caliperui.site/r/number-field.json` |
| otp-input | registry:ui | A segmented field for one-time codes with paste support and status. | `npx shadcn@latest add https://caliperui.site/r/otp-input.json` |
| page-header | registry:ui | A title with description, breadcrumbs and actions. | `npx shadcn@latest add https://caliperui.site/r/page-header.json` |
| pagination | registry:ui | Page links with previous and next, sized for touch. | `npx shadcn@latest add https://caliperui.site/r/pagination.json` |
| password-field | registry:ui | A password input with a show and hide control. | `npx shadcn@latest add https://caliperui.site/r/password-field.json` |
| popover | registry:ui | A small panel anchored to a trigger for quick settings or details. | `npx shadcn@latest add https://caliperui.site/r/popover.json` |
| progress | registry:ui | A measured bar for work with a known size, such as an upload. | `npx shadcn@latest add https://caliperui.site/r/progress.json` |
| prose | registry:ui | Spacing, a readable measure and quiet links for long-form markup you do not control, such as a Markdown render, release notes or a legal page. | `npx shadcn@latest add https://caliperui.site/r/prose.json` |
| radio | registry:ui | A native radio for choosing exactly one option from a short group. | `npx shadcn@latest add https://caliperui.site/r/radio.json` |
| rating | registry:ui | Stars that are a native radio group: arrows change the value, a pointer previews, half steps when you need them, and a read-only average that says how many rat… | `npx shadcn@latest add https://caliperui.site/r/rating.json` |
| scroll-area | registry:ui | A labelled, keyboard-focusable scroll region with a quiet scrollbar. | `npx shadcn@latest add https://caliperui.site/r/scroll-area.json` |
| search | registry:ui | A search field with a clear button and the right keyboard on phones. | `npx shadcn@latest add https://caliperui.site/r/search.json` |
| segmented-control | registry:ui | Segmented control, part of the Blocks family. | `npx shadcn@latest add https://caliperui.site/r/segmented-control.json` |
| select | registry:ui | A styled native select for choosing one option from a short list. | `npx shadcn@latest add https://caliperui.site/r/select.json` |
| select-menu | registry:ui | A select whose list opens with the chosen option over the trigger; the platform picker on touch. | `npx shadcn@latest add https://caliperui.site/r/select-menu.json` |
| separator | registry:ui | A 1px divider in the toolbar's own hairline, with a labelled form for “or continue with email”. Decoration unless you say otherwise. | `npx shadcn@latest add https://caliperui.site/r/separator.json` |
| sidebar | registry:ui | A collapsible navigation rail for an app's main sections. | `npx shadcn@latest add https://caliperui.site/r/sidebar.json` |
| sign-in-form | registry:ui | An email and password form with provider buttons and clear errors. | `npx shadcn@latest add https://caliperui.site/r/sign-in-form.json` |
| site-footer | registry:ui | Link columns, social links and legal text. | `npx shadcn@latest add https://caliperui.site/r/site-footer.json` |
| skeleton | registry:ui | A placeholder with the shape of the content it stands in for. | `npx shadcn@latest add https://caliperui.site/r/skeleton.json` |
| slider | registry:ui | A native range input styled to match, with accessible value text. | `npx shadcn@latest add https://caliperui.site/r/slider.json` |
| sparkline | registry:ui | A tiny trend line with no axes, for use inside text and tables. | `npx shadcn@latest add https://caliperui.site/r/sparkline.json` |
| split-button | registry:ui | A primary action joined to its alternatives; the chosen option becomes the label. | `npx shadcn@latest add https://caliperui.site/r/split-button.json` |
| stat-card | registry:ui | A bordered figure with a label, description and change. | `npx shadcn@latest add https://caliperui.site/r/stat-card.json` |
| stepper | registry:ui | Shows where someone is in a multi-step flow and lets them go back. | `npx shadcn@latest add https://caliperui.site/r/stepper.json` |
| switch | registry:ui | Switch, part of the Inputs family. | `npx shadcn@latest add https://caliperui.site/r/switch.json` |
| tabs | registry:ui | Switch between related views of the same content without leaving the page. | `npx shadcn@latest add https://caliperui.site/r/tabs.json` |
| team-block | registry:ui | People introduced by what they own and how to reach them, with their photo or, when there is none, their initials. | `npx shadcn@latest add https://caliperui.site/r/team-block.json` |
| textarea | registry:ui | A recessed multi-line field that grows with the draft from 3 to 8 lines. | `npx shadcn@latest add https://caliperui.site/r/textarea.json` |
| theme-switch | registry:ui | A light and dark toggle that changes at once or reveals the new theme with a circle, seam or wipe. | `npx shadcn@latest add https://caliperui.site/r/theme-switch.json` |
| toast | registry:ui | A short, dismissible message that confirms an action, with an optional undo. | `npx shadcn@latest add https://caliperui.site/r/toast.json` |
| toggle | registry:ui | A button that stays pressed, alone or in a raised group that holds one choice or many and moves with the arrow keys as a single tab stop. | `npx shadcn@latest add https://caliperui.site/r/toggle.json` |
| toolbar | registry:ui | Tools with one tab stop: arrows move between them, toggles sit recessed, and when the row runs out of width the last tools fold into a More menu with their sta… | `npx shadcn@latest add https://caliperui.site/r/toolbar.json` |
| tooltip | registry:ui | A short hint that appears on hover or focus, never the only way to learn something. | `npx shadcn@latest add https://caliperui.site/r/tooltip.json` |
| user-menu | registry:ui | A dropdown for the signed-in person's identity and account actions. | `npx shadcn@latest add https://caliperui.site/r/user-menu.json` |

## For AI agents

```text
You are adding components from @caliper to a shadcn-compatible project.
1. Read this file (https://sh4dcn.netlify.app/md/caliper.md) for the component list.
2. Fetch the machine-readable index: https://caliperui.site/r/registry.json
3. Install a single component with its install command from the table above.
4. Full structured record: https://sh4dcn.netlify.app/json (library slug: caliper).
```