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

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: React.ReactNode; label: React.ReactNode }[]`	--	The stat callouts to display. Each item has a value (large, bold) and a label (small, muted).
`columns`	`number`	--	Override the number of grid columns. Defaults to statColumns(items.length): 1 → 1, 2 → 2, 3+ → 3.
`className`	`string`	--	Additional CSS classes to apply to the grid container.