Stats With Icons

A row of bordered, card-style stat tiles where each tile has a small icon badge above a large number and a label. Good for pairing each metric with a recognizable visual cue (people, speed, reach, security, etc.).

By Staaarter Team

Stats

Docs

Live preview

Docs

Installation

A real shadcn registry command, not a copy-paste stand-in: it fetches this block plus its dependencies and any missing npm packages, and installs them straight into your project.

npx shadcn add https://staaarter.com/r/stats-with-icons.json

Prefer not to use the CLI? Copy the source from the Code toggle above into src/components/blocks/stats/stats2.tsx instead.

Usage

The file also exports stats2Demo, the exact props behind the preview above. Spread it to get a working section in one line, then replace it with your own data.

import { Stats2, stats2Demo } from "@/components/blocks/stats/stats2";

export default function Page() {
  return <Stats2 {...stats2Demo} />;
}

Props

Prop	Type	Default	Description
heading	string	undefined	Optional heading above the stat grid.
description	string	undefined	Optional supporting text under the heading.
stats	StatItem[]	none	The stat tiles rendered in the grid.
className	string	none	Extra classes for the outer section element.

Types

type StatItem = {
  icon: LucideIcon; // imported directly from lucide-react, e.g. Users
  value: string;
  label: string;
};

Behavior notes

Fully static: icons and numbers are fixed props, there is no animation or interactivity.
Icons are supplied per-stat as a LucideIcon component reference. This is a Server Component, so passing a component reference as a prop is safe here; that pattern is only disallowed once a block is marked "use client".
The tile grid is 1-column on the smallest screens, 2-column at sm, and 4-column at lg, so it degrades gracefully with 3 or 4 stats without needing per-count layout logic.

More Stats Blocks

View all →

Simple Four Stat Row

A plain 4-column row of big numbers with labels, no icons or chrome.

Big Hero Stat

One dominant, oversized stat with smaller supporting stats below it.

Stats With Progress Bars

A vertical list of stats, each paired with a horizontal progress bar toward a goal.

Animated Counter Row

A 4-stat row whose numbers count up from 0 on mount.

Dashboard Style Grid

A dense analytics-dashboard grid with trend deltas and inline sparklines.

Before After Comparison

Two-column before/after comparison of the same metrics, with the after column highlighted to signal improvement.