ScoreGauge
data-displayCircular SVG gauge with score value, label, and optional trend indicator. Three sizes (sm/md/lg) and four status colors (default/good/warning/critical). Full Stitch→Penpot→Tokens→Code pipeline product.
Import
import { ScoreGauge } from "packages/ui/src";Props
ScoreGaugeProps
| Prop | Type | Required |
|---|---|---|
score | number | Yes |
label | string | Yes |
size | sm|md|lg | No |
status | default|good|warning|critical | No |
trend | up|down|flat | No |
trendValue | string | No |
Examples
Component Showcase
Score Gauge
Circular SVG gauge with score value, label, trend indicator, and status colors. First component to complete the full 5-stage pipeline including Penpot normalization.
Sizes
Three size variants: sm (80px), md (120px), lg (200px). All token-driven.
Small
size="sm"Medium
size="md"Large
size="lg"Status Variants
Four status colors mapped to token overrides: default (teal), good (green), warning (amber), critical (red).
Default
Good
Warning
Critical
Dashboard Grid
Six operational health gauges arranged in a responsive grid. Each gauge maps to a real-world service metric with live trend indicators.
Uptime
Latency
Error Rate
Throughput
Saturation
Availability
Pipeline Origin
ScoreGauge is the first component to complete all 5 stages of the design-to-code pipeline, including the Penpot normalization step.
Research
Brain queried for gauge requirements
Design
Stitch MCP generated 'Deep Metric' design system
Normalize
Penpot MCP: frame + component registered
Tokens
14 scoreGauge tokens added (236 total)
Implement
ScoreGauge.tsx: SVG ring, 3 sizes, 4 statuses