dashboardcn

Search documentation

Search for a page or component.

Status Gauge Card

PreviousNext

A status card with a headline word, a metric, an avatar stack, and a segmented semicircular gauge.

Performance metrics
Details
StableServer uptime: 99.7%
shadcnKMax Leiter
6 reviewers
Quality metrics
Details
In reviewCode coverage: 48.2%
Evil RabbitshadcnK
9 testers
import { StatusGaugeCard } from "@/registry/dashboardcn/blocks/status-gauge-card"

export default function StatusGaugeCardDemo() {

A status card with a headline word, a metric, an avatar stack, and a segmented semicircular gauge. Use it for system health, sleep scores, or any state that is best read as a word first and a number second.

Installation

pnpm dlx shadcn@latest add @dashboardcn/status-gauge-card

Also installs card, button, tooltip from shadcn/ui if missing.

Usage

import { StatusGaugeCard } from "@/components/status-gauge-card"

<StatusGaugeCard
  title="Performance metrics"
  status="Stable"
  metricLabel="Server uptime"
  value={0.997}
  color="var(--color-emerald-500)"
  segments={40}
  segmentGap={2.5}
  thickness={14}
  people={[
    { name: "shadcn", src: "https://github.com/shadcn.png" },
    { name: "Kai" },
  ]}
  peopleLabel="6 reviewers"
  action={{ label: "Details", href: "/uptime" }}
/>