---
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", "ai", "animation", "auth", "blocks", "buttons", "cards", "charts", "cms", "developer-tools", "forms", "maps", "marketing", "media", "navigation", "onboarding", "overlays", "payments", "pro-available", "tables"]
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: 250
generated_at: "2026-10-17T06:30:14.294Z"
---

# @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.vercel.app/registry/caliper
- This file: https://sh4dcn.vercel.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 (250)

| 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` |
| action-button | registry:ui | A button that runs async work and reports progress, success or failure on itself, at one width. | `npx shadcn@latest add https://caliperui.site/r/action-button.json` |
| action-swap | registry:ui | A button that cycles through a few labelled states, swapping label and icon in place. | `npx shadcn@latest add https://caliperui.site/r/action-swap.json` |
| activity-heatmap | registry:ui | A year of daily activity as a grid, with selection, and a footer that opens a ranked breakdown of where the activity went over the grid. | `npx shadcn@latest add https://caliperui.site/r/activity-heatmap.json` |
| adaptive-stepper | registry:ui | A quantity control that is a button at zero and a stepper above it. | `npx shadcn@latest add https://caliperui.site/r/adaptive-stepper.json` |
| agent-activity | registry:ui | A live line of what an agent is doing now, with a loading state. | `npx shadcn@latest add https://caliperui.site/r/agent-activity.json` |
| agent-status | registry:ui | One line inside a reply that says what the agent is doing right now, thinking, searching, reading or writing, with what it is working on and a running clock, t… | `npx shadcn@latest add https://caliperui.site/r/agent-status.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` |
| animated-list | registry:ui | A list whose rows come and go gracefully: new rows open into place, removed rows close their gap and the rest glide to their new positions. | `npx shadcn@latest add https://caliperui.site/r/animated-list.json` |
| animated-tabs | registry:ui | Tabs with an expanding or morphing indicator, including closable tabs. | `npx shadcn@latest add https://caliperui.site/r/animated-tabs.json` |
| announcement-bar | registry:ui | A thin bar for product news that rotates messages and remembers dismissal. | `npx shadcn@latest add https://caliperui.site/r/announcement-bar.json` |
| approvals | registry:ui | Cards that ask the user to allow or deny an action, with a risk label. | `npx shadcn@latest add https://caliperui.site/r/approvals.json` |
| arc-picker | registry:ui | Choose a value by moving along an arc. | `npx shadcn@latest add https://caliperui.site/r/arc-picker.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` |
| assistant-panel | registry:ui | A docked panel that holds a conversation beside the product. | `npx shadcn@latest add https://caliperui.site/r/assistant-panel.json` |
| attachment | registry:ui | A file or image chip for chat inputs and forms, with an upload fill, a failed state with Retry and a card for images. | `npx shadcn@latest add https://caliperui.site/r/attachment.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` |
| auto-height | registry:ui | A container that follows its content's height, so a wizard step, a validation summary or a details panel grows and shrinks instead of snapping. The content cha… | `npx shadcn@latest add https://caliperui.site/r/auto-height.json` |
| availability-scheduler | registry:ui | Pick a day and a time slot from a host's availability. | `npx shadcn@latest add https://caliperui.site/r/availability-scheduler.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` |
| billing-toggle | registry:ui | A monthly/yearly switch whose price animates as it changes. | `npx shadcn@latest add https://caliperui.site/r/billing-toggle.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` |
| bloom-menu | registry:ui | A button that blooms into a small arc of icon actions. | `npx shadcn@latest add https://caliperui.site/r/bloom-menu.json` |
| blur-image | registry:ui | An image that sharpens into place over a blurred placeholder at its final size, and shows its description if it fails. | `npx shadcn@latest add https://caliperui.site/r/blur-image.json` |
| book-shelf | registry:ui | A shelf of documents as spines. Width follows the page count, so a dozen fit in a row and scan like a list. Hover or focus leans a spine out; choosing one pull… | `npx shadcn@latest add https://caliperui.site/r/book-shelf.json` |
| booklet | registry:ui | A short ordered read, turned page by page: release highlights, a tour, a report. Turning a page moves it from the pile you have not read to the pile you have, … | `npx shadcn@latest add https://caliperui.site/r/booklet.json` |
| bottom-sheet | registry:ui | A sheet that rises from the bottom with drag detents. | `npx shadcn@latest add https://caliperui.site/r/bottom-sheet.json` |
| box-plot | registry:ui | Distributions side by side as five-number summaries with outliers. Switching to every value spreads the points out from the median on the same axis. | `npx shadcn@latest add https://caliperui.site/r/box-plot.json` |
| breadcrumb | registry:ui | The path to the current page, with each parent linked. | `npx shadcn@latest add https://caliperui.site/r/breadcrumb.json` |
| brush-chart | registry:ui | A chart you zoom by dragging a brush, with event annotations. | `npx shadcn@latest add https://caliperui.site/r/brush-chart.json` |
| bullet-chart | registry:ui | A KPI against its target in one line: the measure fills across poor, fair and good bands toward a target tick, with the gap written out. | `npx shadcn@latest add https://caliperui.site/r/bullet-chart.json` |
| bump-chart | registry:ui | Rank changes of several series across periods. | `npx shadcn@latest add https://caliperui.site/r/bump-chart.json` |
| button | registry:ui | Button, part of the Button family. | `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` |
| 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` |
| card-folder | registry:ui | A stack of cards in a folder tab. | `npx shadcn@latest add https://caliperui.site/r/card-folder.json` |
| card-stack | registry:ui | A pile of cards you flick through one by one. | `npx shadcn@latest add https://caliperui.site/r/card-stack.json` |
| card-switcher | registry:ui | An app switcher for open pages. Cards fan out in depth by recency: the page you are on is in front and each step back is one page older. Flick a card up to clo… | `npx shadcn@latest add https://caliperui.site/r/card-switcher.json` |
| carousel | registry:ui | A swipeable row of slides with controls and dots. | `npx shadcn@latest add https://caliperui.site/r/carousel.json` |
| celebration-burst | registry:ui | One small burst of confetti when a real milestone completes: the first deploy, a finished setup, a paid invoice. Skipped under reduced motion; the words say wh… | `npx shadcn@latest add https://caliperui.site/r/celebration-burst.json` |
| changelog-feed | registry:ui | Versioned release notes with typed changes. | `npx shadcn@latest add https://caliperui.site/r/changelog-feed.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` |
| character-ring | registry:ui | Room left as a ring that fills as you type, turns amber near the limit with a countdown, and red with the overflow. | `npx shadcn@latest add https://caliperui.site/r/character-ring.json` |
| chart-story-block | registry:ui | A number told as a story: the chart draws in once, then each beat moves a marker to its moment and explains it. Readers step through; nothing advances on its o… | `npx shadcn@latest add https://caliperui.site/r/chart-story-block.json` |
| chat-shell | registry:ui | The frame of a chat screen: sidebar of chats, header, transcript and composer. | `npx shadcn@latest add https://caliperui.site/r/chat-shell.json` |
| chat-thread | registry:ui | A thread of chat messages grouped by sender and time. | `npx shadcn@latest add https://caliperui.site/r/chat-thread.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` |
| checklist | registry:ui | A list people tick through: a ticked item is struck out where it is, then settles into Done at the bottom, so what is left stays at the top. Add from the last … | `npx shadcn@latest add https://caliperui.site/r/checklist.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` |
| citations | registry:ui | Numbered source references and a list of the sources behind an answer. | `npx shadcn@latest add https://caliperui.site/r/citations.json` |
| code-block | registry:ui | Syntax-highlighted code with a language label and a copy button. | `npx shadcn@latest add https://caliperui.site/r/code-block.json` |
| code-result-block | registry:ui | Code beside what it makes. Each tab is one small change; switching marks the changed lines and fades the result to its new state. Real text with a copy button. | `npx shadcn@latest add https://caliperui.site/r/code-result-block.json` |
| collapsible | registry:ui | A single disclosure for optional detail. | `npx shadcn@latest add https://caliperui.site/r/collapsible.json` |
| color-picker | registry:ui | Pick a colour from swatches or a free spectrum, with a contrast readout. | `npx shadcn@latest add https://caliperui.site/r/color-picker.json` |
| combo-chart | registry:ui | An amount as bars and a rate as a line, on two axes. The bars rise first and the line draws over them; one column highlight reads both. | `npx shadcn@latest add https://caliperui.site/r/combo-chart.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` |
| comment-thread | registry:ui | Comments and replies with a composer. | `npx shadcn@latest add https://caliperui.site/r/comment-thread.json` |
| comparison-block | registry:ui | The switch, row by row: the same task the old way and with your product, side by side. | `npx shadcn@latest add https://caliperui.site/r/comparison-block.json` |
| comparison-table | registry:ui | A feature grid comparing plans or products row by row. | `npx shadcn@latest add https://caliperui.site/r/comparison-table.json` |
| composition-chart | registry:ui | Parts of a whole with a comparison to the previous period. | `npx shadcn@latest add https://caliperui.site/r/composition-chart.json` |
| condensing-header | registry:ui | A page header that makes room as you read: the title shrinks into a bar, the description folds away and a border appears, following the scroll. | `npx shadcn@latest add https://caliperui.site/r/condensing-header.json` |
| confirm-morph | registry:ui | A destructive action that morphs into its own confirmation, with undo. | `npx shadcn@latest add https://caliperui.site/r/confirm-morph.json` |
| connection-banner | registry:ui | Says when the app lost its connection and what that means, counts down to the next try, and confirms when it is back. | `npx shadcn@latest add https://caliperui.site/r/connection-banner.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` |
| cookie-consent | registry:ui | Asks once and plainly: reject and accept carry the same weight, choices explain what they are for, and the preferences can be reopened later. | `npx shadcn@latest add https://caliperui.site/r/cookie-consent.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` |
| count-badge | registry:ui | A count on an icon or tab that rolls up or down to its new number, pops once when something new arrives and shrinks away at zero. | `npx shadcn@latest add https://caliperui.site/r/count-badge.json` |
| countdown | registry:ui | A live countdown to a date, in a large or compact style. | `npx shadcn@latest add https://caliperui.site/r/countdown.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` |
| cursor-label | registry:ui | A small pill follows the pointer over a labelled area and says what a click does there: Drag, Play, Open. On touch it becomes a label in the corner. | `npx shadcn@latest add https://caliperui.site/r/cursor-label.json` |
| cylinder-carousel | registry:ui | Items arranged around a rotating cylinder. | `npx shadcn@latest add https://caliperui.site/r/cylinder-carousel.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-input | registry:ui | A date field you type into, with the reading shown live and a month that carries data marks. | `npx shadcn@latest add https://caliperui.site/r/date-input.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` |
| depth-timeline | registry:ui | Time as distance. The current row is near and sharp, what comes later recedes along the road, and what has shipped slips behind you. Distance follows certainty… | `npx shadcn@latest add https://caliperui.site/r/depth-timeline.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` |
| device-frame | registry:ui | Show live UI inside a laptop or a phone. The lid opens and the whole device turns, but the screen is an ordinary subtree laid out at the device's true width (1… | `npx shadcn@latest add https://caliperui.site/r/device-frame.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` |
| direction-sphere | registry:ui | A direction input shaped like what it controls. Drag a light across a sphere and a sample beside it takes the highlight and drop shadow of that light. Two slid… | `npx shadcn@latest add https://caliperui.site/r/direction-sphere.json` |
| diverging-bar-chart | registry:ui | Agree–disagree answers centred on neutral, so questions compare by sentiment. Segments grow outward from the centre line. | `npx shadcn@latest add https://caliperui.site/r/diverging-bar-chart.json` |
| dock | registry:ui | A floating dock of icon destinations with a gliding active pill. | `npx shadcn@latest add https://caliperui.site/r/dock.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` |
| draw-on | registry:ui | Wraps an inline SVG so its strokes draw themselves in, one after another, when it scrolls into view. Nodes can fade in after their line arrives. | `npx shadcn@latest add https://caliperui.site/r/draw-on.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` |
| drill-down-menu | registry:ui | A menu that goes deeper one level at a time: the next level slides in, Back slides it out, and the height eases to fit. | `npx shadcn@latest add https://caliperui.site/r/drill-down-menu.json` |
| drop-overlay | registry:ui | Lets a whole area take dropped files: a clear target rises over the content while files are dragged in and names what will happen. | `npx shadcn@latest add https://caliperui.site/r/drop-overlay.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` |
| dumbbell-chart | registry:ui | A before and an after per row joined by a bar. The after dot travels out from the before value, and sorting by change moves rows to their new places. | `npx shadcn@latest add https://caliperui.site/r/dumbbell-chart.json` |
| duration-field | registry:ui | A length of time, not a time of day: type it the way you would say it (90, 1h 30m, 1:30), step it with the buttons or arrow keys, or pick a common length. | `npx shadcn@latest add https://caliperui.site/r/duration-field.json` |
| dynamic-island | registry:ui | A compact pill that grows to show one live activity, then collapses. | `npx shadcn@latest add https://caliperui.site/r/dynamic-island.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` |
| expandable-action-bar | registry:ui | A compact bar of actions that expands to reveal labels. | `npx shadcn@latest add https://caliperui.site/r/expandable-action-bar.json` |
| expandable-card | registry:ui | A card that grows in place to reveal its details. | `npx shadcn@latest add https://caliperui.site/r/expandable-card.json` |
| expanding-button-group | registry:ui | A row of icon buttons where the focused one expands to show its label. | `npx shadcn@latest add https://caliperui.site/r/expanding-button-group.json` |
| expanding-search | registry:ui | A search that expands from an icon into a results list. | `npx shadcn@latest add https://caliperui.site/r/expanding-search.json` |
| exploded-view | registry:ui | Pull a composed interface apart along its depth axis so each layer can be named. Spread is one continuous value: at 0 it is the finished interface seen face on… | `npx shadcn@latest add https://caliperui.site/r/exploded-view.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` |
| faq-section | registry:ui | Questions that open to reveal answers. | `npx shadcn@latest add https://caliperui.site/r/faq-section.json` |
| feature-bento | registry:ui | A bento grid of features of different sizes. | `npx shadcn@latest add https://caliperui.site/r/feature-bento.json` |
| feature-rows-block | registry:ui | Features as numbered rows, each with a product fragment or one figure that proves it. | `npx shadcn@latest add https://caliperui.site/r/feature-rows-block.json` |
| feature-tabs-block | registry:ui | A short feature tour: features beside one stage, with a thin rule that fills and moves on. It waits while hovered, focused or off screen; choosing a feature or… | `npx shadcn@latest add https://caliperui.site/r/feature-tabs-block.json` |
| feed-stream | registry:ui | A live feed that keeps your place: at the top new items slide in; scrolled away, a pill counts what is waiting and takes you back up. | `npx shadcn@latest add https://caliperui.site/r/feed-stream.json` |
| feedback-widget | registry:ui | A small widget to rate and comment from any page. | `npx shadcn@latest add https://caliperui.site/r/feedback-widget.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` |
| file-diff | registry:ui | A line-by-line comparison of two versions of a file. | `npx shadcn@latest add https://caliperui.site/r/file-diff.json` |
| file-dropzone | registry:ui | Drop or choose files, with per-file progress, errors and cancel. | `npx shadcn@latest add https://caliperui.site/r/file-dropzone.json` |
| file-tree | registry:ui | A keyboard-navigable tree for folders and files. | `npx shadcn@latest add https://caliperui.site/r/file-tree.json` |
| filter-toolbar | registry:ui | A search field and filter menus with result counts, for narrowing a list. | `npx shadcn@latest add https://caliperui.site/r/filter-toolbar.json` |
| fixtures | registry:ui | A list of matches or events grouped by date, with scores. | `npx shadcn@latest add https://caliperui.site/r/fixtures.json` |
| floating-button-group | registry:ui | A toolbar of icon and label buttons with separators and pressed states. | `npx shadcn@latest add https://caliperui.site/r/floating-button-group.json` |
| fold-panel | registry:ui | An accordion whose sections are hinged to their headers. Opening turns a section down from edge-on to flat while its height opens, so you can see which header … | `npx shadcn@latest add https://caliperui.site/r/fold-panel.json` |
| folder-tabs | registry:ui | Tabs as folders in a drawer. The chosen folder comes to the front and the rest sit behind it with their tabs showing, so you can see how many there are and whe… | `npx shadcn@latest add https://caliperui.site/r/folder-tabs.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` |
| funnel-chart | registry:ui | Stages of a process narrowing as people drop out. | `npx shadcn@latest add https://caliperui.site/r/funnel-chart.json` |
| gauge | registry:ui | A dial for one value in a range, with named thresholds. | `npx shadcn@latest add https://caliperui.site/r/gauge.json` |
| heatmap-matrix | registry:ui | Two categories against each other, coloured by value. The row and column follow the pointer or arrow keys, and choosing a step of the scale isolates its cells. | `npx shadcn@latest add https://caliperui.site/r/heatmap-matrix.json` |
| hero-block | registry:ui | The first screen of a product page: one claim, two actions and a real artefact that proves it. | `npx shadcn@latest add https://caliperui.site/r/hero-block.json` |
| hero-section | registry:ui | The top of a landing page: eyebrow, title, copy, actions and proof. | `npx shadcn@latest add https://caliperui.site/r/hero-section.json` |
| hero-signup | registry:ui | A hero with a sign-up form built in. | `npx shadcn@latest add https://caliperui.site/r/hero-signup.json` |
| hinge-panel | registry:ui | A list with a detail panel hinged to its edge. Choosing a row swings the panel open toward you from where the list ends, so the detail visibly belongs to the r… | `npx shadcn@latest add https://caliperui.site/r/hinge-panel.json` |
| histogram | registry:ui | The shape of a distribution. Choosing coarser or finer bins retargets the same bars, and the median and p95 markers slide to their values. | `npx shadcn@latest add https://caliperui.site/r/histogram.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` |
| icon-swap | registry:ui | Turns one icon into another in place for a control whose meaning flips: copy to copied, play to pause, menu to close. | `npx shadcn@latest add https://caliperui.site/r/icon-swap.json` |
| image-compare | registry:ui | Two images stacked with a draggable divider. | `npx shadcn@latest add https://caliperui.site/r/image-compare.json` |
| image-generation | registry:ui | A card that shows an image as it is generated, from queued to complete. | `npx shadcn@latest add https://caliperui.site/r/image-generation.json` |
| image-viewer | registry:ui | A full-size viewer with zoom and keyboard navigation. | `npx shadcn@latest add https://caliperui.site/r/image-viewer.json` |
| infinite-masonry | registry:ui | A masonry grid that loads more as you scroll. | `npx shadcn@latest add https://caliperui.site/r/infinite-masonry.json` |
| inline-edit | registry:ui | Text that becomes editable in place, with a pencil as the hint. | `npx shadcn@latest add https://caliperui.site/r/inline-edit.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` |
| item | registry:ui | A generic row: media, title, description, meta and an action. It uses the data table's row spacing and its hover and selected fills. | `npx shadcn@latest add https://caliperui.site/r/item.json` |
| json-viewer | registry:ui | A collapsible tree of JSON with copy and search. | `npx shadcn@latest add https://caliperui.site/r/json-viewer.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` |
| landing-template | registry:ui | A whole product page from the Free blocks, in the order buyers decide, with a header that keeps the action in reach. | `npx shadcn@latest add https://caliperui.site/r/landing-template.json` |
| layer-parallax | registry:ui | A composition of layers that shift against each other as the mouse moves, each by its own depth, with the whole scene tilting no more than 5 degrees. It explai… | `npx shadcn@latest add https://caliperui.site/r/layer-parallax.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` |
| lift-list | registry:ui | A list you reorder by picking a row up. The row you hold comes off the page, rises toward you and leans a few degrees the way you move, and a dashed slot shows… | `npx shadcn@latest add https://caliperui.site/r/lift-list.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` |
| liquidity-heatmap | registry:ui | Resting size by price and time as a heatmap with an optional mid line. | `npx shadcn@latest add https://caliperui.site/r/liquidity-heatmap.json` |
| live-indicator | registry:ui | Whether a feed is live, in words and a dot. The dot sends out a soft ring only while live, blinks while reconnecting and rests otherwise, and gives one extra r… | `npx shadcn@latest add https://caliperui.site/r/live-indicator.json` |
| live-pass | registry:ui | A credential card with a foil you check by tilting it. A sheen follows the mouse and a VERIFIED mark only shows once the card is tilted far enough, as security… | `npx shadcn@latest add https://caliperui.site/r/live-pass.json` |
| load-more | registry:ui | The end of a long list: the next page loads as it comes into view, failures offer a retry, a button does the same for keyboards, and the end says so. | `npx shadcn@latest add https://caliperui.site/r/load-more.json` |
| loader | registry:ui | A small indeterminate indicator in four shapes. | `npx shadcn@latest add https://caliperui.site/r/loader.json` |
| loading-swap | registry:ui | Swaps a loading placeholder for its content without a jump: the content fades in while the height eases once. | `npx shadcn@latest add https://caliperui.site/r/loading-swap.json` |
| logo-marquee | registry:ui | Customer logos in a slow scrolling row. | `npx shadcn@latest add https://caliperui.site/r/logo-marquee.json` |
| magnetic | registry:ui | Wraps one button or link so it leans toward the pointer as it comes near, up to 8px, and settles back when the pointer leaves. | `npx shadcn@latest add https://caliperui.site/r/magnetic.json` |
| marketing-sections | registry:ui | Hero, feature and pricing sections for a landing page. | `npx shadcn@latest add https://caliperui.site/r/marketing-sections.json` |
| marquee | registry:ui | A slow scrolling row of content that pauses on hover. | `npx shadcn@latest add https://caliperui.site/r/marquee.json` |
| mention-input | registry:ui | A text field that turns @people and #channels into mentions. | `npx shadcn@latest add https://caliperui.site/r/mention-input.json` |
| menubar | registry:ui | File, Edit and View for an app that works like a desktop program: one highlight glides along the bar, and once a menu is open, moving along opens the next. | `npx shadcn@latest add https://caliperui.site/r/menubar.json` |
| message | registry:ui | One chat message with a role, optional name, status and actions. | `npx shadcn@latest add https://caliperui.site/r/message.json` |
| message-scroller | registry:ui | A scrolling transcript that stays pinned to the newest message. | `npx shadcn@latest add https://caliperui.site/r/message-scroller.json` |
| meter | registry:ui | A measurement within a known range, with thresholds marked on the track and a word for whether it is fine. | `npx shadcn@latest add https://caliperui.site/r/meter.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` |
| milestones-block | registry:ui | A history read top to bottom. One line fills as the list scrolls through the window and each marker settles when it is reached, using native scroll only. | `npx shadcn@latest add https://caliperui.site/r/milestones-block.json` |
| money-field | registry:ui | A currency amount field with a currency picker and quick-add steps. | `npx shadcn@latest add https://caliperui.site/r/money-field.json` |
| morph-surface | registry:ui | A floating surface that grows out of the element that opened it. | `npx shadcn@latest add https://caliperui.site/r/morph-surface.json` |
| morphing-modal | registry:ui | A modal whose surface morphs between views, like a menu becoming a confirmation. | `npx shadcn@latest add https://caliperui.site/r/morphing-modal.json` |
| multi-chain-swap | registry:ui | Swap one asset for another across networks, with a quote. | `npx shadcn@latest add https://caliperui.site/r/multi-chain-swap.json` |
| multi-select | registry:ui | Choose several values from a list, shown as a compact summary. | `npx shadcn@latest add https://caliperui.site/r/multi-select.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` |
| notification-bell | registry:ui | The bell that opens notifications: the unread count sits on it and rolls to its new value, the bell swings once when the count rises, and its name always says … | `npx shadcn@latest add https://caliperui.site/r/notification-bell.json` |
| notification-center | registry:ui | A list of notifications with read state and filters. | `npx shadcn@latest add https://caliperui.site/r/notification-center.json` |
| notification-stack | registry:ui | Stacked notifications that fan out on hover or focus. | `npx shadcn@latest add https://caliperui.site/r/notification-stack.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` |
| number-tween | registry:ui | A number that eases to its new value instead of jumping. | `npx shadcn@latest add https://caliperui.site/r/number-tween.json` |
| order-book | registry:ui | Bids and asks as depth bars around the spread. | `npx shadcn@latest add https://caliperui.site/r/order-book.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` |
| overflow-actions | registry:ui | A few primary actions with the rest tucked behind an expander. | `npx shadcn@latest add https://caliperui.site/r/overflow-actions.json` |
| page-dots | registry:ui | Where you are in a set of slides: the current dot stretches into a pill that fills while slides advance on their own. | `npx shadcn@latest add https://caliperui.site/r/page-dots.json` |
| page-header | registry:ui | A title with description, breadcrumbs and actions. | `npx shadcn@latest add https://caliperui.site/r/page-header.json` |
| page-parts | registry:ui | Dashboard, password reset and verification screens. | `npx shadcn@latest add https://caliperui.site/r/page-parts.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` |
| password-strength | registry:ui | A new-password field that shows a strength meter and the rules it meets. | `npx shadcn@latest add https://caliperui.site/r/password-strength.json` |
| phone-field | registry:ui | A phone number field with a country picker, formatting and validity. | `npx shadcn@latest add https://caliperui.site/r/phone-field.json` |
| pinned-list | registry:ui | Items you can pin to the top. Pinning moves the row up into Pinned and back again, so the eye follows it, and focus stays on the same pin button. | `npx shadcn@latest add https://caliperui.site/r/pinned-list.json` |
| plan-comparison | registry:ui | Plans side by side with prices and feature lists. | `npx shadcn@latest add https://caliperui.site/r/plan-comparison.json` |
| polar-area-chart | registry:ui | Equal wedges whose length shows the value, for categories with an order around a circle such as months, hours or directions. Wedges grow out from the centre. | `npx shadcn@latest add https://caliperui.site/r/polar-area-chart.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` |
| prediction-market | registry:ui | Outcomes with probabilities and a way to take a position. | `npx shadcn@latest add https://caliperui.site/r/prediction-market.json` |
| presence-list | registry:ui | A list where an added row opens from nothing and a removed row closes, so a live feed or a queue changes without jumping. The first render is immediate. | `npx shadcn@latest add https://caliperui.site/r/presence-list.json` |
| preview-rail | registry:ui | A rail of ticks that previews each section on hover and jumps to it. | `npx shadcn@latest add https://caliperui.site/r/preview-rail.json` |
| price-target-fan | registry:ui | A price history that fans out into a forecast range. | `npx shadcn@latest add https://caliperui.site/r/price-target-fan.json` |
| pricing-block | registry:ui | Pricing worked out from the buyer's own numbers: enter seats and each plan shows its total and why it fits. | `npx shadcn@latest add https://caliperui.site/r/pricing-block.json` |
| pricing-template | registry:ui | A pricing page in one voice: the deal in one line, plans worked out from the buyer's numbers, the switch row by row, the last doubts and one action. | `npx shadcn@latest add https://caliperui.site/r/pricing-template.json` |
| profile-page | registry:ui | A person's page: who they are and where, their local time, pinned work, a year of activity and what they did lately. Following updates at once and rolls back i… | `npx shadcn@latest add https://caliperui.site/r/profile-page.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` |
| progress-button | registry:ui | A button that fills with determinate progress while its work runs, writes the percentage, and settles on a check. | `npx shadcn@latest add https://caliperui.site/r/progress-button.json` |
| progress-ring | registry:ui | Determinate progress in a ring that eases to each value, draws a check when done and a cross when it fails. | `npx shadcn@latest add https://caliperui.site/r/progress-ring.json` |
| project-folder | registry:ui | A folder card that opens to show its contents. | `npx shadcn@latest add https://caliperui.site/r/project-folder.json` |
| prompt-input | registry:ui | A message box with attachments, suggestions, commands and a stop button. | `npx shadcn@latest add https://caliperui.site/r/prompt-input.json` |
| proof-block | registry:ui | Logos set as type, a case study led by one number, press with outlet and date, and live figures with their source. | `npx shadcn@latest add https://caliperui.site/r/proof-block.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` |
| pull-to-refresh | registry:ui | Pull a list down to refresh it, with a button for everyone else. | `npx shadcn@latest add https://caliperui.site/r/pull-to-refresh.json` |
| radial-bar-chart | registry:ui | Four to seven categories as concentric arcs that fill toward the largest one. Sorting moves each arc to its new ring. | `npx shadcn@latest add https://caliperui.site/r/radial-bar-chart.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` |
| radio-cards | registry:ui | Large selectable cards for a choice that needs a title and a description. | `npx shadcn@latest add https://caliperui.site/r/radio-cards.json` |
| range-histogram | registry:ui | A range filter over the shape of the data: bars outside the range dim as you drag, and the count in range is written out. | `npx shadcn@latest add https://caliperui.site/r/range-histogram.json` |
| range-slider | registry:ui | A two-handle slider for choosing a range of values. | `npx shadcn@latest add https://caliperui.site/r/range-slider.json` |
| rank-list | registry:ui | A leaderboard that re-ranks as values change: rows travel to their new place, values count to their new figure, and a mark says how many places each row moved. | `npx shadcn@latest add https://caliperui.site/r/rank-list.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` |
| reaction-bar | registry:ui | Emoji reactions under a message or post. Each chip is a toggle; the count rolls and your chip settles with one small pop. The picker adds a new reaction. | `npx shadcn@latest add https://caliperui.site/r/reaction-bar.json` |
| read-more | registry:ui | Long text kept to a few lines until asked for: it opens to its full height, closes to a faded edge, and the button appears only when needed. | `npx shadcn@latest add https://caliperui.site/r/read-more.json` |
| reading-progress | registry:ui | Where you are in a long page, in a small pill that appears once you start scrolling: a ring that fills as you read, the section you are in and how far through … | `npx shadcn@latest add https://caliperui.site/r/reading-progress.json` |
| resizable-panels | registry:ui | Two panels separated by a draggable, keyboard-operable divider. | `npx shadcn@latest add https://caliperui.site/r/resizable-panels.json` |
| result-icon | registry:ui | The outcome of an operation as a mark that draws itself once: a check, a cross, an exclamation, or a turning arc only while pending. | `npx shadcn@latest add https://caliperui.site/r/result-icon.json` |
| returns-calendar | registry:ui | A month calendar coloured by daily return, with a compounded total. | `npx shadcn@latest add https://caliperui.site/r/returns-calendar.json` |
| rich-text-editor | registry:ui | A small editor with bold, italic, lists and links, returning HTML. | `npx shadcn@latest add https://caliperui.site/r/rich-text-editor.json` |
| ridgeline | registry:ui | Stacked distributions that overlap for easy comparison. | `npx shadcn@latest add https://caliperui.site/r/ridgeline.json` |
| roadmap-block | registry:ui | A public roadmap in now, next and later. Votes roll the count and move the card to its place in the column, so readers see their vote count. | `npx shadcn@latest add https://caliperui.site/r/roadmap-block.json` |
| rotary-knob | registry:ui | A rotary control with a real edge. The knob is a short cylinder seen from above: a stack of discs gives it thickness, a ring of ticks lights up to the value, a… | `npx shadcn@latest add https://caliperui.site/r/rotary-knob.json` |
| scatter-chart | registry:ui | Two measures per item, with an optional third as point size. Points grow in, hidden groups shrink away, and a trend line with its fit draws after them. | `npx shadcn@latest add https://caliperui.site/r/scatter-chart.json` |
| scene-story-block | registry:ui | A chapter section told by scrolling, with a 3D scene beside it. As you read, the scene tips toward you and its layers spread apart, and the layer the chapter i… | `npx shadcn@latest add https://caliperui.site/r/scene-story-block.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` |
| scroll-aware-fab | registry:ui | The main action kept in reach: it shows its label at the top and when scrolling up, and shrinks to its icon while you scroll down. | `npx shadcn@latest add https://caliperui.site/r/scroll-aware-fab.json` |
| scroll-effects | registry:ui | Tools for effects that follow scroll position, such as progress and reveals. | `npx shadcn@latest add https://caliperui.site/r/scroll-effects.json` |
| scroll-shadow | registry:ui | A scroll area whose edges fade only where there is more to see, easing in and out as you reach either end. | `npx shadcn@latest add https://caliperui.site/r/scroll-shadow.json` |
| scroll-spy-nav | registry:ui | An outline that follows your reading: a marker glides to the section in view, and choosing a link scrolls there and moves focus into it. | `npx shadcn@latest add https://caliperui.site/r/scroll-spy-nav.json` |
| scroll-story | registry:ui | Sections that change as you scroll. | `npx shadcn@latest add https://caliperui.site/r/scroll-story.json` |
| scroll-timeline | registry:ui | A history down the page: the line fills as you scroll and each entry lights and settles as the line reaches it. | `npx shadcn@latest add https://caliperui.site/r/scroll-timeline.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` |
| secret-field | registry:ui | A secret shown only on purpose: reveal it and the characters settle into place, and it masks itself again on a visible timer. Copying never needs it revealed. | `npx shadcn@latest add https://caliperui.site/r/secret-field.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` |
| selection-toolbar | registry:ui | Actions for the words you selected, where you selected them: the toolbar grows out of the selection and leaves with it; Alt+T reaches it from the keyboard. | `npx shadcn@latest add https://caliperui.site/r/selection-toolbar.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` |
| session-timeout | registry:ui | A fair warning before a session ends: a dialog counts down with a ring, offers to stay signed in, and signs out at zero. | `npx shadcn@latest add https://caliperui.site/r/session-timeout.json` |
| shader-background | registry:ui | A GPU-drawn animated background. | `npx shadcn@latest add https://caliperui.site/r/shader-background.json` |
| shake | registry:ui | Nudges a field or control sideways once to say “not accepted”, with an outline instead under reduced motion. | `npx shadcn@latest add https://caliperui.site/r/shake.json` |

## For AI agents

```text
You are adding components from @caliper to a shadcn-compatible project.
1. Read this file (https://sh4dcn.vercel.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.vercel.app/json (library slug: caliper).
```