270 degree gauge where the zone owns the color, the arc, its end dot and the status word all take the hue of the band the value sits in, At risk, Caution or Healthy. The dots underneath switch between metrics, account health, fear and greed and liquidity in the demo, and the arc redraws to the new value. metrics and zones are both props, so the bands and their colors are yours. Light and dark via shadcn theme tokens, respects reduced motion. More dark, data-dense components at https://www.ssych.com/library?ref=21st.dev
import { useEffect } from "react"
import HealthGauge, { type HealthGaugeMetric } from "@/components/ui/health-gauge"
const METRICS: HealthGaugeMetric[] = [
{ value: 74, previous: 68, previousLabel: "vs last week", target: 80, label: "Account health", sub: "margin ratio" },
{ value: 38, previous: 45, previousLabel: "vs yesterday", label: "Fear & Greed", sub: "market sentiment" },
{ value: 61, previous: 61, previousLabel: "vs last hour", target: 70, label: "Liquidity", sub: "depth score" },
]
export default function DemoOne() {
// open the preview in dark by default; the sandbox theme toggle still works
useEffect(() => { document.documentElement.classList.add("dark") }, [])
return (
<div className="flex min-h-[320px] w-full items-center justify-center p-6">
<HealthGauge metrics={METRICS} />
</div>
)
}
Part of ssych ui — browse the full library on 21st.dev.