dashboardcn

Search documentation

Search for a page or component.

Ring KPI Card

PreviousNext

A card with a row of KPI tiles, each with a segmented ring next to the value and a comparison to the previous value.

API response time
132 ms
down from 148 ms
Error rate
1.4 %
up from 0.9 %
Request throughput
4.3K req/s
up from 3.9K req/s
import { EllipsisVertical } from "lucide-react"

import { Button } from "@/components/ui/button"

A row of KPI tiles where each value sits next to a small segmented ring showing progress or share, with a comparison to the previous value beneath. Good for targets and quotas.

Installation

pnpm dlx shadcn@latest add @dashboardcn/ring-kpi-card

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

Usage

import { RingKpiCard } from "@/components/ring-kpi-card"

<RingKpiCard
  metrics={[
    { label: "API response time", value: 132, previous: 148, unit: "ms", max: 200, invertDelta: true },
    { label: "Error rate", value: 1.4, previous: 0.9, unit: "%", max: 5, invertDelta: true },
    { label: "Request throughput", value: 4300, previous: 3900, format: "compact", unit: "req/s", max: 5000 },
  ]}
/>