Stat Card

Display statistics with large numbers, labels, and trend indicators

Stat Card

Display key metrics with large numbers, labels, and optional trend indicators.

Usage

import { StatCard, StatCardValue, StatCardLabel } from "@/components/ui/stat-card";

export default function Example() {
  return (
    <StatCard>
      <StatCardValue>1,632</StatCardValue>
      <StatCardLabel showDot>Clicks</StatCardLabel>
    </StatCard>
  );
}

Components

StatCard

The container component that manages layout and spacing.

StatCardValue

The large number/value display.

StatCardLabel

The descriptive label with optional dot indicator.

StatCardDot

A standalone dot indicator with glassmorphic styling.

StatCardTrend

Trend indicator showing up/down/neutral direction.

Props

StatCard Props

Prop	Type	Default	Description
variant	"default" | "compact" | "spacious"	"default"	Spacing between value and label
align	"left" | "center" | "right"	"left"	Alignment of content

StatCardValue Props

Prop	Type	Default	Description
size	"sm" | "default" | "lg"	"default"	Size of the value text

StatCardLabel Props

Prop	Type	Default	Description
showDot	boolean	false	Show dot indicator before label
dotColor	string	-	Custom color for the dot

StatCardTrend Props

Prop	Type	Default	Description
direction	"up" | "down" | "neutral"	"neutral"	Trend direction (affects color and icon)
showIcon	boolean	true	Show arrow icon

Variants

Value Sizes

// Small - 20px
<StatCardValue size="sm">1,632</StatCardValue>

// Default - 32px
<StatCardValue size="default">1,632</StatCardValue>

// Large - 48px
<StatCardValue size="lg">1,632</StatCardValue>

Spacing Variants

// Compact - minimal gap
<StatCard variant="compact">
  <StatCardValue>68%</StatCardValue>
  <StatCardLabel>Engagement</StatCardLabel>
</StatCard>

// Default - standard gap
<StatCard variant="default">
  <StatCardValue>68%</StatCardValue>
  <StatCardLabel>Engagement</StatCardLabel>
</StatCard>

// Spacious - larger gap
<StatCard variant="spacious">
  <StatCardValue>68%</StatCardValue>
  <StatCardLabel>Engagement</StatCardLabel>
</StatCard>

Examples

With Dot Indicator

<StatCard>
  <StatCardValue>1,632</StatCardValue>
  <StatCardLabel showDot>Clicks</StatCardLabel>
</StatCard>

With Custom Dot Color

<StatCard>
  <StatCardValue>68%</StatCardValue>
  <StatCardLabel showDot dotColor="#4ade80">
    Engagement rate
  </StatCardLabel>
</StatCard>

With Trend Indicator

<StatCard>
  <StatCardValue>2,847</StatCardValue>
  <StatCardLabel>Total users</StatCardLabel>
  <StatCardTrend direction="up">+12.5%</StatCardTrend>
</StatCard>

Centered Alignment

<StatCard align="center">
  <StatCardValue size="lg">99.9%</StatCardValue>
  <StatCardLabel>Uptime</StatCardLabel>
</StatCard>

Multiple Stats

<div className="flex gap-8">
  <StatCard>
    <StatCardValue>40%</StatCardValue>
    <StatCardLabel showDot>Desktop</StatCardLabel>
  </StatCard>
  <StatCard>
    <StatCardValue>35%</StatCardValue>
    <StatCardLabel showDot>Mobile</StatCardLabel>
  </StatCard>
  <StatCard>
    <StatCardValue>25%</StatCardValue>
    <StatCardLabel showDot>Tablet</StatCardLabel>
  </StatCard>
</div>

Design Tokens

• Value Font: 32px (default), 500 weight
• Label Font: 16px, regular weight
• Value Color: var(--ui-text-primary)
• Label Color: var(--ui-text-secondary)
• Dot Size: 12px with glassmorphic border
• Trend Up: #4ade80
• Trend Down: #f87171

Found In

• Bento2 - Click statistics with chart
• Bento17 - Engagement rate with percentages
• Bento26 - Analytics dashboard metrics
• Bento27 - Performance indicators