StatCard

A dashboard metric card displaying a key number with a label, icon, and optional trend indicator. Built on Card — layout and sizing follow the same rules.

Anatomy

The card header contains the label and icon. The card content shows the large value and an optional change line with a trending arrow.

Revenue
$45,231

+20.1% from last month

Trend Variants

The trend prop controls the arrow direction and color. Omit it (or the change prop) for a neutral metric with no trend indicator.

Trend up

Revenue
$45,231

+20.1% from last month

Trend down

Bounce Rate
24.5%

-3.2% from last month

No trend

Total Orders
1,429

Dashboard Grid

StatCards are designed to sit in a responsive grid at the top of a dashboard layout.

Revenue
$45,231

+20.1%

Active Users
2,350

+12.5%

Bounce Rate
24.5%

-3.2%

Conversion
3.6%

+0.4%

Design Guidelines

Do

  • Show 3–6 stat cards together. A row of key metrics gives context at a glance; fewer than three feels sparse, more than six is overwhelming.
  • Use contextual icons. The icon reinforces the metric category — dollar for revenue, users for people, activity for rates.
  • Keep values concise. Format large numbers ($45K not $45,231) to maintain readability at small card sizes.

Don't

  • Don't use for non-numeric content. If the value is text or a status, use a different card variant.
  • Don't mix trend directions without clear labeling. A mix of up/down arrows in a grid reads as noise — provide enough context in the change string.
  • Don't omit the label. The large value alone is meaningless without the label telling users what they're looking at.

Developer Reference

Props

  • icon (required) — a LucideIcon component displayed in the card header.
  • label (required) — the metric name displayed as the card description.
  • value (required) — the formatted metric value shown in large bold text.
  • change (optional) — a short change string shown below the value.
  • trend (optional) — "up" | "down". Shows a TrendingUp (success color) or TrendingDown (error color) icon next to the change string.
  • className — forwarded to the root Card element.

Usage

import { OriginUiStatCard } from "@/components/branding/origin-ui-stat-card"
import { DollarSign, Users, Activity } from "lucide-react"

// Dashboard grid
<div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
  <OriginUiStatCard
    icon={DollarSign}
    label="Revenue"
    value="$45,231"
    change="+20.1% from last month"
    trend="up"
  />
  <OriginUiStatCard
    icon={Users}
    label="Active Users"
    value="2,350"
    change="+12.5% from last month"
    trend="up"
  />
  <OriginUiStatCard
    icon={Activity}
    label="Bounce Rate"
    value="24.5%"
    change="-3.2% from last month"
    trend="down"
  />
  // No trend indicator
  <OriginUiStatCard
    icon={Package}
    label="Total Orders"
    value="1,429"
  />
</div>