Stats Bar

Content

Horizontal row of 3-5 key metrics with labels. Typically placed below a hero or at the top of a dashboard. Each stat shows a number and descriptor.

Code Example

<div className="flex items-center justify-between px-6 py-4 rounded-lg border bg-card">
  {stats.map((stat, i) => (
    <div key={stat.label} className="flex items-center gap-4">
      {i > 0 && <div className="w-px h-8 bg-border" />}
      <div className="text-center">
        <div className="text-2xl font-bold">{stat.value}</div>
        <div className="text-xs text-muted-foreground">{stat.label}</div>
      </div>
    </div>
  ))}
</div>

Variants (2)

Bordered

Stats separated by vertical dividers in a bordered container

style= "bordered"dividers= true

Cards

Each stat in its own card

style= "cards"dividers= false

Guidelines

Do

Keep to 3-5 metrics maximum
Use consistent number formatting
Add trend indicators where appropriate
Use dividers between stats for visual separation

Don't

Show more than 5 stats in one bar
Mix currencies and percentages without labels
Use small text for the primary number
Wrap stats to multiple rows (reduce count instead)

Use Cases

Portfolio summary metrics
Campaign performance KPIs
Project dashboard header
Landing page social proof (fund size, IRR, projects)

Details

Category: Content
Reference Component: StatsBar
Variants: 2
Guidelines: 4 dos, 4 donts

Back to all patterns