dashboardcn
1

Tick KPI Card

Previous

A card with a row of KPI tiles, each with a value out of a whole and a tick bar showing how far along it is.

Open invoices
512of 691
Stock replenished
7,420of 12,300 units
Budget utilized
103Kof 2.6M
import { EllipsisVertical, FileText, Landmark, Package } from "lucide-react"

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

Installation

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

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

Usage

import { TickKpiCard } from "@/components/tick-kpi-card"

<TickKpiCard
  metrics={[
    { icon: <FileText />, label: "Open invoices", value: 512, max: 691, color: "var(--color-emerald-500)" },
    { icon: <Package />, label: "Stock replenished", value: 7420, max: 12300, unit: "units", color: "var(--color-violet-500)" },
    { icon: <Landmark />, label: "Budget utilized", value: 103000, max: 2600000, format: "compact", color: "var(--color-amber-500)" },
  ]}
/>