Gauge
FREESemicircle KPI gauge with colored bands and an optional needle.
Installation
Terminal
npx @bloxa/cli add gauge-chart
# or: npx shadcn@latest add @bloxa/gauge-chartPackages installed automatically: motion
Examples
Score, bands, needle
72Performance score
38%Busy
64%Goal
API reference
Every component also accepts the props of the element it renders.
GaugeChart
| Prop | Type | Default | Description |
|---|---|---|---|
| value / min / max | number | — / 0 / 100 | Value and range. |
| bands | { to, color, label? }[] | — | Colored ranges; the value's band colors the arc. |
| needle | boolean | false | Needle. |
| format | Intl.NumberFormatOptions | — | Center value format. |
| size / thickness | number | 240 / 18 | Width and thickness. |