dashboardcn

Search documentation

Search for a page or component.

KPI Row Card

PreviousNext

A card with a period switcher, a row of KPI tiles with sparklines and deltas, and a footer summary.

Catalog health
SKU coverage, replenishment pressure, and aging stock in one pass.
In stock
8,420+5.4%Rising
Out of stock
1,245-12.0%Gaps easing
Pending restock
640+3.1%Moving
Slow movers
1,105+0.6%Stable
12,845 products tracked across categories. 76% currently available in stock.
Show full analytics
import { AlertTriangle, Boxes, PackageX, Timer } from "lucide-react"

import { KpiRowCard } from "@/registry/dashboardcn/blocks/kpi-row-card"

A single card holding a row of KPI tiles, each with a sparkline and delta, plus a period switcher in the header and a summary in the footer. It is the top-of-dashboard block for shadcn/ui, composed from the KPI card, sparkline, and period tabs.

Installation

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

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

Usage

import { KpiRowCard } from "@/components/kpi-row-card"

<KpiRowCard
  title="Catalog health"
  description="SKU coverage, replenishment pressure, and aging stock."
  periods={[
    { value: "week", label: "Week" },
    { value: "month", label: "Month" },
  ]}
  metrics={[
    { label: "In stock", value: 8420, delta: 0.054, note: "Rising", trend: [6, 7, 7.5, 8.4] },
    { label: "Out of stock", value: 1245, delta: -0.12, invertDelta: true, trend: [1.6, 1.5, 1.3, 1.25] },
  ]}
  footer="12,845 products tracked across categories."
  action={{ label: "Show full analytics", href: "/analytics" }}
/>