Skip to content
UI Kit
Accent color

Stats sections and number counters

Numbers that prove something, in eight layouts from a hairline grid to a chart and a counter that counts up in the page language.

8 variants
Switch category

Numbers that prove something

A stats section turns claims into numbers, such as customers, years, response time or saved hours. The eight layouts here format every number in the language of the page and announce it once to screen readers, even when the counter animates.

Grid and Row with dividers fit three or four numbers under a hero. Big numbers gives one or two figures the whole width. Cards and With description add a sentence that explains what the number means. With chart shows a trend instead of a single value, Counter counts up when it scrolls into view, and Split with text puts the numbers next to a short story.

Choose numbers a customer cares about, not internal metrics. Round them honestly and add the unit. Three strong numbers beat six weak ones. With reduced motion the counter shows the final value at once, so nobody waits for it.

Stats

Grid

Four figures in hairline cells, each with its change.

Open in Studio

Row with dividers

One framed band with hairlines between the figures, two by two on phones.

Open in Studio

Big numbers

Oversized figures on hairlines, the explanation beside them. Calm and editorial.

Open in Studio

Cards

Icon, figure, change and a small trend line on each card.

Open in Studio

With chart

One large figure with its chart, two smaller ones with trend lines.

Open in Studio

With description

Each figure gets a heading and a short paragraph, marked by a fine accent line.

Open in Studio

Counter

The figures count up once they scroll into view, formatted in the page language. Still with reduced motion.

Open in Studio

Split with text

Heading and text on the left, four figures in a framed grid on the right.

Open in Studio

Details

What Stats brings along, read from the registry and the source.

Area
Marketing
Variants
8
Version
1.0.0 · since 1.0.0
File
components/ui/stats.tsx
Brings along
utilskiticonsectionrevealnumber-tickermotion
npm packages
None
Languages
English and German, 3 texts of its own
Studio
All 8 variants editable
Build with AI
Over MCP in Claude, Cursor, Copilot and Codex

Props

The StatsProps interface from components/ui/stats.tsx, with the comments from the code.

  • variantoptional
    StatsVariant

    gridrowbig-numberscardswith-chartwith-descriptioncountersplit

  • eyebrowoptional
    React.ReactNode
  • titleoptional
    React.ReactNode
  • descriptionoptional
    React.ReactNode
  • actionsoptional
    React.ReactNode
  • statsrequired
    StatItem[]
  • chartoptional
    React.ReactNode

    with-chart: replaces the large drawn chart

  • chartLabeloptional
    string

    with-chart: a caption above the large chart, e.g. the period

Built-in texts

Stats writes these texts itself. The language follows the KitProvider, the labels prop replaces single ones.

Show all 3 texts
vsEnglish vs. last periodGerman zum Vorzeitraum
upEnglish upGerman gestiegen
downEnglish downGerman gesunken

Accessibility

Read from the source of the component.

  • Adds text for screen readers where icons and graphics stand alone.
  • The server renders the starting state in full, JavaScript only adds the interaction.

Motion

  • Rises in briefly the first time it comes into view (kit-rise, useInView).
  • Brings animations of its own, calmly timed and without wobble.
  • With reduced motion (prefers-reduced-motion) it stays still. 11 places in the code switch motion off then.

Frequent questions

How do I install Stats?

With aiw add @ai-website/stats. The command puts components/ui/stats.tsx into your project, the code is yours from then on. It brings along icon, section, reveal, number-ticker and motion. It needs no further npm packages.

Which variants does Stats have?

8 variants, Grid, Row with dividers, Big numbers, Cards, With chart, With description, Counter and Split with text. You pick one with the variant prop, for example variant="row".

Can I translate the texts of Stats?

Yes. Stats carries 3 texts of its own in English and German, such as “vs. last period”, “up” and “down”. The language follows the KitProvider, single texts change through the labels prop.

Can an AI assistant build with Stats?

Yes. Through the MCP server of the aiw CLI, Claude, Cursor, GitHub Copilot, Windsurf, Codex and Gemini find Stats with aiw_components and install it with aiw_add @ai-website/stats. Name the variant in your prompt, for example variant="grid", and the assistant writes your content straight into the props.

Can I adjust Stats without code?

Yes, in the Studio. All 8 variants are editable there, texts, lists and switches. The Studio writes the matching Stats code to copy.

Similar components

More from Marketing, the same area of the kit.

Often combined with

Sections that usually sit next to Stats on a page.

Often searched

Jump to

Copied to the clipboard