dashboardcn
2

Score Gauge Card

PreviousNext

A score card with a headline word, a radial gauge around the score, and a breakdown list of labelled bars.

Sleep score
Excellent
29 Jun - 5 Jul
98
  • Duration: 7h 50m49/50
  • Bedtime: 11:12 PM29/30
  • Interruptions: 2 times20/20
import { EllipsisVertical } from "lucide-react"

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

Installation

pnpm dlx shadcn@latest add https://dashboardcn.com/r/score-gauge-card.json

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

Usage

import { ScoreGaugeCard } from "@/components/score-gauge-card"

<ScoreGaugeCard
  title="Sleep score"
  status="Excellent"
  caption="29 Jun - 5 Jul"
  score={98}
  color="var(--color-violet-500)"
  items={[
    { label: "Duration", detail: "7h 50m", value: 49, max: 50 },
    { label: "Bedtime", detail: "11:12 PM", value: 29, max: 30 },
    { label: "Interruptions", detail: "2 times", value: 20, max: 20 },
  ]}
/>