ComponentsSite blocks

Stats band

Concrete, sourced numbers — “4.8 on Google · 1,240 reviews”, “340 projects in 12 years”. A semantic dl; numbers go through Intl for the locale, units are superscripts that screen readers hear spelled out, and there is no count-up animation. The schema warns when a figure has no source.

blocks/site/stats-band.tsx, blocks/site/registry-1.ts, styles/blocks.csstheme · material · accent · density · font

Kıyı in numbers

Fifteen years by the water

Google rating: 4.8; Source: 1,240 reviews · Business Profile, Nov 2026
Cold meze on the menu tonight: 22; Source: Kitchen, 10 Nov 2026
Rakı labels, by the glass: 40; Source: Wine & spirits list, autumn
Of tables booked on WhatsApp: 63 percent; Source: Reservations, Oct 2026

Installation

$ pnpm add @vamos-ui/react

The whole kit as one package — get updates by bumping the version. Add the styles to globals.css: @import "@vamos-ui/react/styles.css";

Usage

import { StatsBand } from "@vamos-ui/react/blocks";

<StatsBand
  items={[
    { value: 4.8, label: "Google rating", source: "1,240 reviews, Nov 2026" },
    { value: 63, unit: "%", label: "Of tables booked on WhatsApp", source: "Oct 2026" },
  ]}
/>

Lint (registry): stat-missing-source for unsourced figures, stat-round-number for “500+” style values.

Examples

With text (agency)

A paragraph on the start side, a 2×2 grid of figures on the end side.

Results

What a site that works changes

We measure our sites by bookings, not visits. These are medians across the 48 restaurants and clinics we ran for the whole of the last twelve months.

More booking requests in year one: 38 percent; Source: 48 clients, Nov 2025–Oct 2026
Median first reply to a request: 11 min; Source: Shared inbox data
Largest contentful paint on 4G: 1.4 seconds; Source: CrUX, p75, Oct 2026
Sites live today: 126; Source: Studio records

Ledger (clinic annual report)

Label, dotted leader, figure, and a mono source line under each row.

Annual report

Defne Clinic, 2026

Two physicians, four nurses, one address in Suadiye.

Consultations: 3,812; Source: Clinic records, Jan–Oct 2026
Patients who would recommend us: 96.4 percent; Source: Post-visit survey, n = 1,107
Google rating: 4.9; Source: 684 reviews, Nov 2026
Reportable complications: 0; Source: Ministry of Health filing, Q3

Turkish formatting

locale="tr-TR": 4,8 and 1.240; “yüzde” for screen readers with site1LabelsTr.

Rakamlarla Kıyı

Google puanı: 4,8; Kaynak: 1.240 yorum · Kasım 2026
Yorum: 1.240
WhatsApp’tan gelen rezervasyon: 63 yüzde; Kaynak: Ekim 2026

API

StatsBand

Prop	Type	Default
`variant` Layout (see examples).	`"inline" \| "with-text" \| "ledger"`	`"inline"`
`items` { value: number \| string, unit?, unitLabel?, label, source? } — 2–5 figures. Numbers keep their decimals and get locale separators; strings are verbatim.	`StatItem[]`	`—`
`eyebrow / title / lead` Optional header.	`ReactNode`	`—`
`body` with-text: the paragraph(s) beside the figures.	`RichDoc \| string`	`—`
`locale` Intl locale for the figures.	`string`	`"en-US"`
`labels` percent, source.	`Partial<Site1Labels>`	`—`
`theme / anchor / id / className / components / editMode / headingLevel` Shared block props.	`BlockBaseProps`	`—`

Stat

Status picker