Stats With Background Pattern

A centered heading above four stat tiles, with a low-opacity repeating dot-grid pattern layered behind the content for texture. The pattern is a plain inline radial-gradient background, no images or extra dependencies.

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-background-pattern.json

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

Usage

The file also exports stats15Demo, 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 { Stats15, stats15Demo } from "@/components/blocks/stats/stats15";

export default function Page() {
  return <Stats15 {...stats15Demo} />;
}

Props

Prop	Type	Default	Description
eyebrow	string	undefined	Small label above the heading.
heading	string	none	Section heading.
description	string	undefined	Optional supporting sentence under the heading.
stats	StatTile[]	none	Stat tiles rendered in a 4-column grid on larger screens.
className	string	none	Extra classes for the outer section element.

Types

type StatTile = {
  label: string;
  value: string;
};

Behavior notes

The dot-grid background is a static CSS radial-gradient set via inline style on an absolutely-positioned, aria-hidden div behind the content; it does not respond to scroll or interaction.
The pattern uses currentColor at low opacity (text-foreground/[0.08]) so it stays subtle in both light and dark theme without a separate dark-mode override.
Stat tiles render in a fixed 2-column (mobile) / 4-column (sm and up) grid; the block always renders exactly the tiles it's given, there is no truncation or 'show more'.

More Stats Blocks

View all →

Simple Four Stat Row

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

Stats With Icons

Bordered stat tiles, each topped with a lucide icon above the number.

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.