dashboardcn

Search documentation

Search for a page or component.

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"

A row of KPI tiles, each with a value out of a whole and a tick bar showing how far along it is. Suits capacity, budget consumed, and goals with a known ceiling.

Installation

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

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)" },
  ]}
/>