Number Radial Gauge

Installation

pnpm dlx shadcn@latest add @cleverui/number-radial-gauge

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

Usage

tsx

import { NumberRadialGauge } from '@/components/ui/number-radial-gauge'

Exampletsx

import { NumberRadialGauge } from '@/components/ui/number-radial-gauge'

export default function NumberRadialGaugeDemo() {
  return (
    <div className="mx-auto flex min-h-[420px] max-w-3xl flex-col items-center justify-center gap-12 px-6 py-16 sm:flex-row sm:items-end sm:gap-16">
      <NumberRadialGauge
        value={87}
        max={100}
        label="Seat utilization"
        suffix="%"
        size={168}
      />
      <div className="max-w-xs text-center sm:text-left">
        <p className="font-mono text-[11px] uppercase tracking-[0.2em] text-muted-foreground sm:text-xs">
          Meridian Ops · Q2
        </p>
        <p className="mt-3 text-xl font-semibold tracking-tight text-balance text-foreground">
          Capacity that still has headroom
        </p>
        <p className="mt-2 text-sm leading-relaxed text-muted-foreground">
          Active seats against contracted volume across 214 workspaces. The
          arc and the center always agree, one motion value drives both.
        </p>
      </div>
    </div>
  )
}

API reference

NumberRadialGauge accepts the following props.

Prop	Type	Default	Description
`value`*	`number`	–	current value; the arc and center count both derive from it
`max`	`number`	`100`	value that maps to a full sweep
`label`	`string`	–	mono micro-label rendered beneath the gauge
`suffix`	`string`	`'%'`	unit glyph after the center value
`size`	`number`	`160`	rendered diameter in px; SVG scales via viewBox
`arcWidth`	`number`	`3`	stroke width of the progress arc (the track stays a 1px hairline)
`duration`	`number`	`1.2`	seconds for the synchronized arc sweep and count-up

…plus everything from React.HTMLAttributes<HTMLDivElement>: className, event handlers, aria attributes and the rest pass straight through.

Related components

Number Odometer

Multi-digit odometer where every digit rolls inside its own masked column, settling right to left like a meter, with prefix, suffix, and decimal support.

Number Segment Meter

Discrete React meter primitive, value-of-max rendered as Tailwind-token unit cells that fill in stepped sequence, with a mono fraction readout and threshold tick.

Number Ticker

Counts to a value once in view with an expo-out feel, fast start, precise landing. Locale-aware formatting, prefix and suffix, tabular numerals against layout shift.

Stat Delta Chip

Compact metric chip pairing a counted-up value with a signed delta pill, direction glyph and token-honest color, primary for gains, destructive for losses.

Number Milestone Row

A row of milestone numbers between hairline separators, each figure lands in sequence with a spring settle, and a primary tick draws itself under the final one.

Percent Ring

Determinate loading ring, hairline token track, primary arc, tabular mono percent at center and a micro-label beneath. Falls back to an orbiting indeterminate segment when no progress is given.

Frequently asked questions

How do I install the Number Radial Gauge component?

Register the @cleverui registry in your components.json ("@cleverui": "https://cleverops.com.au/r/{name}.json"), then run `npx shadcn@latest add @cleverui/number-radial-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 Number Radial Gauge require?

Number Radial Gauge 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 Number Radial Gauge 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