Stat Group

A responsive grid of stat cards for dashboard overviews. Each StatItem shows a label, primary value, optional percentage delta (green/red), and an icon slot.

Total Revenue

$45,231

+20.1%

Active Users

2,350

-4.3%

Conversion Rate

3.24%

+1.1%

Orders

1,429

import { StatGroup } from "@aetherstack/patterns"

Installation

terminal

npx aether-ui add stat-group

Import

import.tsx

import { StatGroup, StatItem } from "@aetherstack/patterns"

Usage

stat-group.tsx

import { StatGroup, StatItem } from "@aetherstack/patterns"
import { Users, DollarSign, TrendingUp } from "lucide-react"

<StatGroup cols={3}>
  <StatItem
    label="Total Revenue"
    value="$45,231"
    delta={20.1}
    icon={<DollarSign className="h-5 w-5" />}
  />
  <StatItem
    label="Active Users"
    value="2,350"
    delta={-4.3}
    icon={<Users className="h-5 w-5" />}
  />
  <StatItem
    label="Conversion Rate"
    value="3.24%"
    delta={1.1}
    icon={<TrendingUp className="h-5 w-5" />}
  />
</StatGroup>

Props

Prop	Type	Default	Description
cols	2 \| 3 \| 4	3	Number of columns in the responsive grid.
children*	ReactNode	—	StatItem components to render in the grid.
className	string	—	Additional classes on the grid wrapper.

* Required

Accessibility

→StatItem renders a plain div — no interactive role. Values and labels are plain text, readable by screen readers in document order.
→Delta indicators use colour alone to distinguish positive/negative; add a visually-hidden label (e.g. "up"/"down") for colour-blind users if needed.
→Icon containers are decorative and can be aria-hidden.