Docs
Gauge
Gauge
Displays a gauge or a component that looks like a activity.
Installation
pnpm dlx shadcn@latest add "https://designali.in/r/styles/default/gauge"
Props
| Prop | Type | Description | Default |
|---|---|---|---|
| value | any | A number from 0 to 100 representing the gauge value | - |
| size | any | The size of the gauge in pixels or percentage | "100%" |
| gapPercent | any | The gap percentage between arcs | 5 |
| strokeWidth | any | The thickness of the arc | 10 |
| equal | any | Whether the primary and secondary arcs are equal | false |
| showValue | any | Whether the percentage value is displayed | true |
| primary | any | Color of the primary arc | Dynamic range (red, amber, blue, green) |
| secondary | any | Color of the secondary arc | Gray hue |
| transition | any | Animation transition settings | [1000, 200, 0] |
| className | string | Class name for the SVG | - |
| props | any | Additional props for the SVG element | - |