Skip to content
Pinky UI

data

Radial Meter

A restrained semantic circular value display with optional segments.

  • data
  • meter
  • progress
  • svg

Live preview

67%Completion

Quick usage

usage
import { RadialMeter } from "@pinky-ui/systems";

<RadialMeter value={67} label="Completion" />

Presets

Default

Restrained production behaviour.

Default behaviour

Quiet

Reduced intensity for dense product screens.

disabled={true}

Install

Add @pinky-ui/systems as a dependency, or use the CLI to copy this component's source directly into your project — no dependency to manage, fully editable.

shell
npm install @pinky-ui/systems

Prefer to run the whole repository locally instead?

repository
git clone https://github.com/florash/Pinky-UI.git
cd Pinky-UI
npm install
npm run dev

Props

PropTypeDefaultDescription
segmentsnumber1Optional meaningful intervals around the track.
classNamestring—Styles the outer interaction surface.

Accessibility

  • Keyboard and touch paths match the pointer interaction.
  • Stable labels and values remain available without motion.

Performance

  • Two SVG circles and one animated stroke offset.

Reduced motion

Motion resolves immediately while semantics, focus and state remain unchanged.

When to use

  • One bounded completion or capacity value

When not to use

  • Many adjacent gauges or ambiguous scores

Skill

Purpose

RadialMeter presents one bounded value in a soft editorial circle. Use it for completion, capacity or a single score where a compact shape helps scanning.

Avoid speedometer aesthetics, ambiguous scores, many adjacent meters or replacing exact text with arc length. Segments should represent meaningful intervals, not decoration.

The wrapper exposes semantic meter min/max/current values and visible text. Reduced motion updates immediately. Keep color secondary to the numeric value and label, and use Comparison Bars when users need relative comparison.

Open this skill on its own page