StatRow

Two to five numbers, each with a label and a note.

Preview

Downloads: 1.2k
Version: v1.2.3
Node: 22+

src/examples/stat-row/example.astro

---
import { StatRow } from "@/presentation/components/site/stat-row";
---

<StatRow
  stats={[
    { value: "1.2k", label: "Downloads" },
    { value: "v1.2.3", label: "Version" },
    { value: "22+", label: "Node" },
  ]}
/>

Add to your site

npx docs-sitekit add stat-row

It writes these files, and keeps a file you changed:

src/presentation/components/site/stat-row.tsx

It requires nothing else from the registry.

Props

Built from the TypeScript types and the TSDoc comments of the component, so they cannot drift from the code.

Props of StatRow
Key	Type	Default	Allowed values	Description
`stats`	readonly StatItem[]	required	-	Two to five items. A different count throws.

Fields of StatItem
Key	Type	Default	Allowed values	Description
`value`	string	required	-	The number, or any short text. A long one wraps inside its card.
`label`	string	required	-	What the value counts.
`note`	string	-	-	A line under the value, for the unit or the period.

Variants and states

With notes

A note under the value, for the unit or the period.

Downloads: 1.2k; Last 30 days
Version: v1.2.3; Released on 2026-10-28

src/examples/stat-row/with-notes.astro

---
import { StatRow } from "@/presentation/components/site/stat-row";
---

<StatRow
  stats={[
    { value: "1.2k", label: "Downloads", note: "Last 30 days" },
    { value: "v1.2.3", label: "Version", note: "Released on 2026-10-28" },
  ]}
/>

A long value

A value that does not fit wraps inside its card, and the page does not scroll.

A long value: 1,234,567,890,123
Runtime requests: 0; Every number comes from props

src/examples/stat-row/long-value.astro

---
import { StatRow } from "@/presentation/components/site/stat-row";
---

<StatRow
  stats={[
    { value: "1,234,567,890,123", label: "A long value" },
    { value: "0", label: "Runtime requests", note: "Every number comes from props" },
  ]}
/>

Five stats

The most a row takes. Fewer than two or more than five fails the build.

Themes: 2
Phone widths: 3
Layers: 4
Callouts: 5
License: MIT

src/examples/stat-row/five.astro

---
import { StatRow } from "@/presentation/components/site/stat-row";
---

<StatRow
  stats={[
    { value: "2", label: "Themes" },
    { value: "3", label: "Phone widths" },
    { value: "4", label: "Layers" },
    { value: "5", label: "Callouts" },
    { value: "MIT", label: "License" },
  ]}
/>

About

A row of numbers for a project page: downloads, a version, the Node versions it supports. The value is the large text, in the mono face, and a long value wraps inside its card.

It takes two to five items and throws, with the limits in the message, outside them.
One column on a phone, then up to one column per item on wider screens, on explicit tracks.
The numbers come from props. The kit fetches nothing at run time, so the page decides where a number comes from.
The home page shows a row when sitekit.config.json has a stats key with the same items, as this site does. Without the key, nothing is shown.

Accessibility

It is a description list, so a screen reader says each label with its value, and no meaning depends on color alone.
A long value wraps (overflow-wrap: anywhere), so it never widens the page.
The label, the value and the note use the fg-muted and fg-bright tokens, which reach AA in both themes, and the row chooses no status color.

Source

stat-row.tsx

Edit this page

Last updated 5 November 2026