Stats Widget
Analytics display component with trend indicators and multiple layout options.
Preview
12.5K
Followers
8.2%
Engagement
342
Posts
45K
Reach
Usage
import { StatsWidget } from "@/components/profile"
const stats = [
{ label: "Followers", value: "12.5K", trend: 12, trendLabel: "vs last month" },
{ label: "Engagement", value: "8.2%", trend: -2, trendLabel: "vs last month" },
{ label: "Posts", value: "342", trend: 5, trendLabel: "this month" },
]
<StatsWidget stats={stats} variant="grid" />Variants
Grid
12.5K
Followers
8.2%
Engagement
342
Posts
45K
Reach
Row
12.5K
Followers
8.2%
Engagement
342
Posts
Card
12.5K
Followers
8.2%
Engagement
342
Posts
45K
Reach
Trend Indicators
Positive trends show green with an up arrow, negative trends show red with a down arrow.
1,234
Growing
567
Stable
89
Declining
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| stats | StatItem[] | - | Array of stat items |
| variant | "grid" | "row" | "card" | "grid" | Layout variant |
| showTrend | boolean | true | Show trend indicators |
StatItem Type
interface StatItem {
label: string
value: string
trend?: number // Percentage change
trendLabel?: string // e.g. "vs last month"
}