dashboardcn
1

Progress Card

A compact progress card with an icon title, a pill tick bar, and a count with a secondary stat.

Compliance checks
16/24 checks passing67% assigned
import { EllipsisVertical, ShieldCheck } from "lucide-react"

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

Installation

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

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

Usage

import { ProgressCard } from "@/components/progress-card"

<ProgressCard
  title="Compliance checks"
  icon={<ShieldCheck />}
  value={16}
  max={24}
  label="checks passing"
  detail="67% assigned"
/>