Metric tile with delta pill and an inline SVG sparkline — no chart library.
2,180
Bookmarks
6,900
Installs
57,800
Views
import { KpiCard } from "@/components/ui/kpi-card"
export default function DemoKpiCard() {
return (
<div className="grid gap-4 p-8 sm:grid-cols-2 lg:grid-cols-3">
<KpiCard label="Monthly recurring revenue" value="$48,290" change={12.4} hint="vs. last month" series={[12, 18, 15, 24, 22, 30, 36, 34, 42]} />5 more lines behind a plan
Previews are free to watch. Reading and copying the full source needs a plan.
See plansThat's all 6 components
Part of Quanta Charts — browse the full library on Nuxus.