Liquid Gauge Card

Installation

pnpm dlx shadcn@latest add @cleverui/card-liquid-gauge

Requires the @cleverui registry in your components.json, a one-off, two-line setup.

Usage

tsx

import { CardLiquidGauge } from '@/components/ui/card-liquid-gauge'

Exampletsx

import { CardLiquidGauge } from '@/components/ui/card-liquid-gauge'

export default function CardLiquidGaugeDemo() {
  return (
    <div className="mx-auto flex min-h-[520px] max-w-sm items-center px-4 py-16 sm:px-6">
      <CardLiquidGauge
        title="Reservoir capacity"
        value={68}
        unit="%"
        caption="Tank 3 · North gallery"
        maxSlosh={6}
        className="w-full"
      />
    </div>
  )
}

API reference

CardLiquidGauge accepts the following props.

Prop	Type	Default	Description
`title`*	`string`	–	metric name, e.g. 'Reservoir capacity'
`value`*	`number`	–	fill level 0–100; sets the liquid height
`unit`	`string`	`'%'`	suffix on the big number
`caption`	`string`	–	mono footnote under the number
`maxSlosh`	`number`	`6`	surface deflection clamp in px (values above 10 clamped)

…plus everything from Omit< React.HTMLAttributes<HTMLElement>, 'onDrag' | 'onDragStart' | 'onDragEnd' | 'onAnimationStart' | 'title' >: className, event handlers, aria attributes and the rest pass straight through.

Related components

Magnetic Cluster

A cluster of small cards with social physics, hover one and its neighbors lean two to three degrees toward it on springs, deferring to the focus. The group reacts as a field.

Constellation Card

A card whose border is a constellation, seeded stars joined by hairline segments that twinkle in slow sequence, then re-wire into a new star graph on hover. The frame is the show.

Frost Wipe Card

A condensation card for React, the pane mists over with canvas breath, your pointer squeegees it clear, droplets run, and it slowly re-fogs. Tailwind token colors throughout.

Iris Aperture Card

A React card with a working camera iris, token-surface blades pivot through real f-stops to unveil the pane on hover, under a live mono aperture readout. Tailwind tokens, mechanical spectacle.

Moire Veil Card

A React card veiled by two hairline plates whose misalignment breeds moiré bands, pointer drift shears the top plate so interference sweeps the surface. Pure Tailwind tokens.

$Refraction Card preview$

Refraction Card

Content behind a simulated glass pane, token-built backdrop ghosts split a pixel apart against the pointer, fringing like dispersion under a gliding specular band. Glass without WebGL.

Frequently asked questions

How do I install the Liquid Gauge Card component?

Register the @cleverui registry in your components.json ("@cleverui": "https://cleverops.com.au/r/{name}.json"), then run `npx shadcn@latest add @cleverui/card-liquid-gauge`. The shadcn CLI copies the source into your project, you own the code from that point. You can also copy the source directly from this page.

What dependencies does Liquid Gauge Card require?

Liquid Gauge Card uses motion on top of React and Tailwind CSS. You don't need to install it manually, the shadcn CLI resolves and installs npm dependencies automatically when you add the component.

Can I theme Liquid Gauge Card to match my brand?

Yes. The component is styled entirely with Tailwind utilities over standard design tokens (primary, background, muted, border), so it inherits your existing shadcn/ui theme automatically. Change your CSS variables and the component follows, no source edits needed for palette, radius, or fonts.

Preview & code