Component

Stat Grid

A marketing-style grid of stat callouts — each showing a large bold value and a small muted label. Column count auto-scales with item count (capped at 3) or can be set explicitly.

Three stats

The default layout: three items produce three equal columns.

10k+Active users worldwide

$4.2MRevenue generated for customers

99.9%Uptime SLA across all regions

Two stats

Two items automatically produce two columns — no override needed.

50+Integrations available

24/7Customer support coverage

Custom columns

Pass columns to override the auto-computed column count — here four items in two columns.

1B+API requests per month

<50msMedian response time

150+Countries served

99.99%Error-free requests

KPI cards

variant="card" with layout="label-first", columns="auto", per-item tone and description.

Revenue$48.2k+12% vs last month

Orders1,284Completed checkouts

Refunds231.8% of orders

Pending review7Older than 48h

Installation

$pnpm add @refraction-ui/react

Usage

tsx

import { StatGrid } from '@refraction-ui/react'

export function HeroStats() {
  return (
    <StatGrid
      items={[
        { value: '10k+', label: 'Active users worldwide' },
        { value: '$4.2M', label: 'Revenue generated for customers' },
        { value: '99.9%', label: 'Uptime SLA across all regions' },
      ]}
    />
  )
}

Props

Prop	Type	Default	Description
`items`	`{ value: ReactNode; label: ReactNode; id?: string; description?: ReactNode; tone?: "default" \| "positive" \| "negative" \| "caution"; props?: HTMLAttributes<HTMLDivElement> }[]`	--	The stats. Optional description (how the figure was computed), tone (value colour on the status roles) and props (attributes for the item element).
`columns`	`1 \| 2 \| 3 \| 4 \| 'auto'`	--	Maximum columns; reflows to fewer on narrow screens. auto fits as many ~12rem items as the width allows. Defaults to statColumns(items.length): 1 → 1, 2 → 2, 3+ → 3.
`variant`	`'plain' \| 'card'`	`'plain'`	plain = marketing callouts; card = bordered dashboard KPI cards.
`layout`	`'value-first' \| 'label-first'`	`'value-first'`	label-first puts a small caption above the value (dashboard order).
`className`	`string`	--	Additional CSS classes to apply to the grid container.