feedback/@mihcm/ui·v0.21.0·stable

ProgressCircle

Circular progress indicator for KPI cards and compact status summaries with semantic tones and value formatting.

Configurator Examples Usage Accessibility Api

Live preview

Adjust the controls on the right; the preview and code update in real time.

68%

example.tsxtsx

import { ProgressCircle } from '@mihcm/ui/ProgressCircle';

export function Example() {
  return (
    <ProgressCircle
  value="68"
  size="lg"
  segmented
  tone="primary"
  valueSize="lg"
  valueTone="auto"
  showValue
    ></ProgressCircle>
  );
}

Install

Both paths are valid. CLI ships the source into your repo (you own it). Install pins via npm.

npx @mihcm/cli add ProgressCircle

Copies the source into components/ds/ProgressCircle.tsx. You own the file. Use --out to override the directory or --force to overwrite.