Loading...
Loading...
> Key Performance Indicator card component with value, trend, and optional icon for displaying metrics.
1import { KpiCard } from "@/components/ui/kpi-card";
1<KpiCard2 title="Total Revenue"3 value="$45,231"4 change={12}5 trend="up"6 subtitle="from last month"7/>
1<KpiCard2 title="Revenue"3 value="$45,231"4 change={12}5 trend="up"6 icon={<DollarSign className="h-4 w-4" />}7/>89<KpiCard10 title="Active Users"11 value="2,350"12 change={8}13 trend="up"14 icon={<Users className="h-4 w-4" />}15/>
1<KpiCard2 title="Bounce Rate"3 value="42.5%"4 change={5.2}5 trend="down"6 subtitle="vs. last week"7 icon={<Activity className="h-4 w-4" />}8/>
1<KpiCard2 title="Conversion Rate"3 value="3.2%"4 change={0.1}5 trend="neutral"6 subtitle="no significant change"7/>
1<KpiCard2 title="Total Orders"3 value="1,234"4 subtitle="all time"5/>
1<div className="grid gap-4 md:grid-cols-2 lg:grid-cols-4">2 <KpiCard title="Revenue" value="$45,231" change={12} trend="up" />3 <KpiCard title="Users" value="2,350" change={8} trend="up" />4 <KpiCard title="Growth" value="+18%" change={3} trend="up" />5 <KpiCard title="Active" value="573" change={2} trend="neutral" />6</div>
| Prop | Type | Default | Description |
|---|---|---|---|
| title* | string | - | The KPI label/title |
| value* | string | number | - | The primary value to display |
| change | number | - | Percentage change value (absolute value displayed) |
| trend | "up" | "down" | "neutral" | - | Trend direction with corresponding color |
| subtitle | string | - | Additional context text below the change indicator |
| icon | React.ReactNode | - | Icon element to display in the header |
| className | string | - | Additional CSS classes for the card |