sections

StatsBar

Row of animated counters with labels. Each stat animates on viewport entry with staggered delays.

v1.0.0react >=18next >=14tailwind >=4

statscountersmetricsnumberssectionkpi

Preview

Loading preview...

Props

Prop	Type	Default	Description
`stats*`	`Array<{ value: number; label: string; prefix?: string; suffix?: string }>`	`—`	Array of stat items. Each has a numeric value, label, and optional prefix/suffix.
`triggerOnView`	`boolean`	`true`	Start counting when the element enters the viewport
`className`	`string`	`—`	Additional Tailwind classes for the outer section
`id`	`string`	`—`	HTML id attribute

Layout

Display: grid

Responsive: Yes

Responsive row of stat counters. 2 cols on mobile, N cols (matching stats array length) on desktop.

Examples

Basic stats

<StatsBar
  stats={[
    { value: 10000, label: "Users", suffix: "+" },
    { value: 99.9, label: "Uptime", suffix: "%" },
    { value: 50, label: "Countries" },
  ]}
/>

Revenue metrics with prefix

<StatsBar
  stats={[
    { value: 2.5, label: "ARR", prefix: "$", suffix: "M" },
    { value: 150, label: "Customers", suffix: "+" },
    { value: 4.9, label: "Rating", suffix: "/5" },
    { value: 24, label: "Support", suffix: "/7" },
  ]}
/>

No viewport trigger

<StatsBar
  triggerOnView={false}
  stats={[
    { value: 100, label: "Components" },
    { value: 12, label: "Categories" },
  ]}
/>

AI Usage Hint

Use StatsBar for displaying key metrics — user counts, revenue, uptime. Pass an array of { value, label, prefix?, suffix? }. Counters animate on viewport entry. Example: stats={[{ value: 10000, label: 'Users', suffix: '+' }, { value: 99.9, label: 'Uptime', suffix: '%' }]}

Works Well With

CounterFadeUpDotGrid