Skip to content

Bento of stats

Asymmetric stats bento around one hero number.

Usage

Usage
import { StatsBento } from '@/components/blocks/stats-04'


<StatsBento />


// Your own numbers and shader palette
<StatsBento
  heading="Payments that never sleep."
  hero={{ label: 'Volume processed · 2026', value: 812, prefix: '$', suffix: 'M', delta: '+32%', deltaLabel: 'year on year' }}
  regions={{ label: 'Markets live', value: 27, total: 30 }}
  teams={{
    label: 'Merchants onboarded',
    value: 3940,
    people: [{ initials: 'NB', gradient: ['#1D4ED8', '#60A5FA'] }],
  }}
  uptime={{ label: 'API uptime', value: 99.99, decimals: 2, days: Array(90).fill('up') }}
  latency={{ label: 'Checkout p95', value: 180, unit: 'ms', from: 420, points: [240, 220, 205, 190, 180] }}
  colors={{ base: '#060024', strand: '#7C5AF0', glow: '#C09AFF' }}
/>

Install

pnpm dlx shadcn@latest add @pastaui-pro/stats-04

Source

Props

Bento of stats props
PropTypeDefaultDescription
eyebrowstring= 'Pylonic in numbers'Small label above the heading.
headingstring= 'An edge network that never clocks out.'Section heading.
descriptionstring= Pylonic blurbMuted paragraph beside the heading.
hero{ label: string; value: number; decimals?: number; prefix?: string; suffix?: string; delta?: string; deltaLabel?: string; description?: string }= 4.82B requests servedThe big stat on the shader card. It counts up from zero on view.
regions{ label: string; value: number; total: number; caption?: string }= 38 of 42 regionsCount for the dot-grid map card. More value lights more dots.
teams{ label: string; value: number; caption?: string; people: { initials: string; gradient: [string, string] }[] }= 12,480 teams, five avatarsCount and stacked initials avatars with two-colour gradients.
uptime{ label: string; value: number; decimals?: number; days: ('up' | 'degraded' | 'down')[]; startLabel?: string; endLabel?: string }= 99.98% over 90 daysPercentage plus one bar per day, oldest first.
latency{ label: string; value: number; unit: string; from?: number; caption?: string; points: number[] }= 41 ms p95Figure that settles from `from` to value, and samples for the mini line.
colorsPartial<{ base: string; haze: string; strand: string; glow: string; core: string }>= { base: '#030B1E', haze: '#0B2A6B', strand: '#2B7FFF', glow: '#8EC5FF', core: '#F2F8FF' }Palette passed to the String wave background behind the hero stat.
classNamestring= —Additional classes for the section.
styleCSSProperties= —Inline styles, handy for overriding the `--pp-*` theme variables.