Pro

Liquid gauge

A round gauge filled to its value with liquid: two waves roll across the surface, a few bubbles rise, and a new value pours in or drains with a small settle. The reading turns to the liquid's text colour exactly where the liquid covers it.

Pro

pnpm dlx shadcn@latest add @caliper/liquid-gauge

Storage

Shared across the workspace.

68 of 100 GB used

Installs components/ui/liquid-gauge.tsxDepends on none beyond ReactMotion none in component source

When to use

Use it for

Storage, quotas, tanks, batteries, budgets: anything that fills.
One headline figure on a settings or billing page.

Skip it when

Rows of many gauges; use usage meters.
Values without a natural full, such as revenue.

Decisions

Why it is built this way, so you know what to keep when you change your copy.

Behaviour

A meter: It is a meter with its value and reading; reduced motion stills the surface and moves the level at once.

Styling

One reading, two colours: The figure is drawn twice and the second copy is masked by the liquid itself, so the colour change follows the wave exactly.

Installation

terminal

pnpm dlx shadcn@latest add @caliper/liquid-gauge

Adds its 2 files to components/ui/, each with its own stylesheet, and installs their packages. Pro installs with your access token, set up once per project. See Pro access. The first part also adds Caliper UI’s tokens; import them once as in Installation.

Usage

Import it from your copy of the source. The example behind the preview comes with the source.

example.tsx

import { LiquidGauge } from "@/components/ui/liquid-gauge"

The worked example comes with Pro

The 32-line example behind the preview opens here, ready to copy.

576 Pro parts, blocks and page templates, all with source
$199 once, with a year of updates. What you have stays yours
A full refund within 14 days if it is not for you

Checking your licence…

API reference

LiquidGauge

component

Also accepts the native props of its root element and a ref.

PropTypeDefaultDescription

value *number—

maxnumber100

label *string—What is being measured, e.g. "Storage used".

sizenumber168Diameter in px.

format((value: number, max: number) => string)(v, m) => `${Math.round((v / m) * 100)}%`The reading in the middle; a whole percentage by default.

It exposes meter semantics, with aria-label, aria-valuemin, aria-valuemax, aria-valuenow, aria-valuetext and aria-hidden kept in step with state.

No custom key handling; Tab and the native activation keys do the work.

Motion

It declares no animation in its component source. Any transition comes from its stylesheet, which uses the duration tokens that collapse to instant under prefers-reduced-motion.