Loading...
Loading...
> A KPI card component for displaying statistics with optional trend indicators, icons, and change percentages.
1import { StatCard } from "@/components/ui/stat-card";
1<StatCard2 title="Total Revenue"3 value="$45,231"4 change={12}5 trend="up"6 subtitle="from last month"7 icon={<DollarSign className="h-4 w-4" />}8/>
1<StatCard2 title="Sales"3 value="12,234"4 change={20}5 trend="up"6 subtitle="from last week"7 icon={<TrendingUp className="h-4 w-4" />}8/>9<StatCard10 title="Returns"11 value="342"12 change={8}13 trend="down"14 subtitle="from last week"15 icon={<Activity className="h-4 w-4" />}16/>17<StatCard18 title="Pending"19 value="1,234"20 change={0}21 trend="neutral"22 subtitle="no change"23 icon={<ShoppingCart className="h-4 w-4" />}24/>
1<StatCard2 title="Active Users"3 value="2,350"4 change={18}5 trend="up"6 subtitle="from yesterday"7/>8<StatCard9 title="Bounce Rate"10 value="42.3%"11 change={5}12 trend="down"13 subtitle="from last month"14/>
1<StatCard2 title="Total Customers"3 value="10,482"4 icon={<Users className="h-4 w-4" />}5/>6<StatCard7 title="Revenue"8 value="$89,234"9 icon={<DollarSign className="h-4 w-4" />}10/>
1<div className="grid gap-4 md:grid-cols-2 lg:grid-cols-4">2 <StatCard3 title="Total Revenue"4 value="$45,231.89"5 change={20.1}6 trend="up"7 subtitle="from last month"8 icon={<DollarSign className="h-4 w-4" />}9 />10 <StatCard11 title="Subscriptions"12 value="+2,350"13 change={18}14 trend="up"15 subtitle="from last month"16 icon={<Users className="h-4 w-4" />}17 />18 {/* More cards... */}19</div>
| Prop | Type | Default | Description |
|---|---|---|---|
| title* | string | - | Card title/label |
| value* | string | number | - | Primary metric value |
| change | number | - | Percentage change value |
| trend | "up" | "down" | "neutral" | - | Trend direction indicator |
| subtitle | string | - | Additional context text |
| icon | React.ReactNode | - | Icon to display (typically Lucide icon) |
| className | string | - | Additional CSS classes |