Components
- Activity Heatmap
- Activity Rings
- Bar Chart
- Bar List
- Command Palette
- Composed Chart
- Corner Frame
- Data Table
- Delta Badge
- Distribution Bar
- Donut Chart
- Dot Plot
- Funnel Chart
- Heatmap Chart
- KPI Card
- Metric List
- Metric Value
- Period Tabs
- Radar Chart
- Radial Gauge
- Sankey Chart
- Scatter Chart
- Segmented Meter
- Sparkline
- Tick Bar
- Timeline
- Trend Chart
Blocks
- Activity Rings Card
- Allocation Card
- Balance Chart Card
- Breakdown Card
- Commerce KPI Row
- Contributions Card
- Data Table Card
- Distribution Card
- Dot Plot Card
- Dual Metric Card
- Funnel Chart Card
- Goal Chart Card
- Heatmap Chart Card
- Insight Card
- KPI Row Card
- Metric Tabs Chart Card
- Payment Summary Card
- Period Bar Chart Card
- Progress Card
- Revenue Ring Card
- Ring KPI Card
- Score Gauge Card
- Stage Bars Card
- Status Gauge Card
- Tick KPI Card
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 @dashboardcn/score-gauge-cardAlso 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 },
]}
/>Your dashboard, your code.
Every component is copied into your project with the shadcn CLI. No package to upgrade, nothing to override.