Stat Card
Display key metrics and KPIs with value, label, icon and trend indicator.
Loading...
import { DollarSign } from "lucide-react"
import { StatCard } from "@/components/ui/stat-card"Installation
pnpmnpmyarnbun
Usage
import { StatCard, StatCardGroup } from "@/components/ui/stat-card"<StatCard
label="Total Revenue"
value="$45,231.89"
trend={20.1}
icon={<DollarSign className="size-4" />}
/>Examples
Basic
A simple stat card with just a label and value.
Total Users
2,350
import { StatCard } from "@/components/ui/stat-card"
export function StatCardBasic() {With Trend (Positive)
Display a positive trend indicator.
Loading...
import { StatCard } from "@/components/ui/stat-card"
export function StatCardWithTrend() {With Trend (Negative)
Display a negative trend indicator.
Loading...
import { StatCard } from "@/components/ui/stat-card"
export function StatCardNegativeTrend() {With Icons
Add icons to provide visual context.
Loading...
import { CreditCard, DollarSign, ShoppingCart, Users } from "lucide-react"
import { StatCard, StatCardGroup } from "@/components/ui/stat-card"Grid Layout
Use StatCardGroup to create a responsive grid of stat cards.
Loading...
import { Activity, CreditCard, DollarSign, Users } from "lucide-react"
import { StatCard, StatCardGroup } from "@/components/ui/stat-card"