Gauge
Supporting description for the gauge
76%75.55 score
You earn $3287 today, its higher than last month. Keep up your good work!
Waiting for action
Copy this complete component into a page file. Edit and run it in the Playground.
Loading editor…
Dashboard progress gauge with half and full variants, optional summary, and footer metrics.
| Prop | Type | Default | Description |
|---|---|---|---|
title | string | — | Widget heading. |
subtitle | string | — | Supporting description under the title. |
value | number | — | Progress percentage from 0–100. |
trackColor | string | theme border | Gauge track stroke colour. |
valueColor | string | Opus accent | Gauge data range stroke colour. |
variant | "half" | "full" | "half" | Half arc or full circular gauge. |
change | string | — | Optional delta badge such as +10%. |
changeTrend | "up" | "down" | "up" | Delta badge direction. |
summary | string | — | Supporting copy below the gauge. |
footer | { color?, label, value, trend? }[] | — | Optional footer metrics. Each item can define its own accent line colour. |
density | SurfaceDensity | "comfortable" | Spacing scale. |