dashboardcn

Search documentation

Search for a page or component.

Radial Gauge

PreviousNext

A semicircular or ring gauge, continuous or segmented, with content in the middle.

99.7%Uptime
48%Coverage
72
import { RadialGauge } from "@/components/ui/radial-gauge"

export default function RadialGaugeDemo() {

A semicircular or ring gauge for a value out of a whole, continuous or segmented, with room for content in the middle. Use it for capacity, health scores, or progress toward a target.

Installation

pnpm dlx shadcn@latest add @dashboardcn/radial-gauge

Usage

import { RadialGauge } from "@/components/ui/radial-gauge"

<RadialGauge value={99.7} segments={40} size={180} thickness={12}>
  <span className="text-2xl font-semibold">99.7%</span>
  <span className="text-muted-foreground text-xs">Uptime</span>
</RadialGauge>

Examples

Inline in a KPI card

A small segmented ring next to a value.

API response time
132 ms
-10.8%
Error rate
1.4 %
+5.0%
Throughput
4.3k req/s
+10.0%
import { Card, CardContent } from "@/components/ui/card"
import { DeltaBadge } from "@/components/ui/delta-badge"
import { RadialGauge } from "@/components/ui/radial-gauge"