Zum Inhalt springen
UI Kit
Accent

Stats Sections und Zähler

Zahlen, die etwas belegen, in acht Aufbauten vom Haarlinien-Raster bis zum Diagramm und einem Zähler, der in der Seitensprache hochzählt.

8 Variants
Kategorie wechseln

Zahlen, die etwas belegen

Eine Stats Section macht aus Behauptungen Zahlen, etwa Kunden, Jahre, Antwortzeit oder gesparte Stunden. Die acht Layouts hier formatieren jede Zahl in der Sprache der Seite und sagen sie Screenreadern einmal an, auch wenn der Zähler läuft.

Das Raster und die Reihe mit Trennern passen zu drei oder vier Zahlen unter dem Hero. „Große Zahlen“ gibt einer oder zwei Zahlen die ganze Breite. „Karten“ und „Mit Beschreibung“ ergänzen einen Satz dazu, was die Zahl bedeutet. „Mit Diagramm“ zeigt einen Verlauf statt eines Werts, der Zähler läuft beim Hereinscrollen hoch, „Geteilt mit Text“ stellt die Zahlen neben eine kurze Geschichte.

Wähle Zahlen, die Kunden wichtig sind, keine internen Kennzahlen. Runde ehrlich und nenne die Einheit. Drei starke Zahlen wirken mehr als sechs schwache. Bei reduzierter Bewegung steht der Endwert sofort da, niemand wartet auf den Zähler.

Zahlen

Raster

Vier Zahlen in Haarlinien-Zellen, jede mit ihrer Veränderung.

Im Studio öffnen

Reihe mit Trennern

Ein gefasstes Band mit Haarlinien zwischen den Zahlen, auf dem Telefon zwei mal zwei.

Im Studio öffnen

Große Zahlen

Übergroße Zahlen auf Haarlinien, die Erklärung daneben. Ruhig wie im Magazin.

Im Studio öffnen

Karten

Icon, Zahl, Veränderung und eine kleine Trendlinie auf jeder Karte.

Im Studio öffnen

Mit Diagramm

Eine große Zahl mit Diagramm, zwei kleinere mit Trendlinie.

Im Studio öffnen

Mit Beschreibung

Jede Zahl bekommt eine Überschrift und einen kurzen Absatz, markiert von einer feinen Akzentlinie.

Im Studio öffnen

Zähler

Die Zahlen zählen hoch, sobald sie ins Bild kommen, im Zahlenformat der Seitensprache. Bei reduzierter Bewegung stehen sie still.

Im Studio öffnen

Geteilt mit Text

Überschrift und Text links, vier Zahlen in einem gefassten Raster rechts.

Im Studio öffnen

Details

Was Zahlen mitbringt, aus Registry und Quellcode gelesen.

Bereich
Marketing
Variants
8
Version
1.0.0 · seit 1.0.0
Datei
components/ui/stats.tsx
Bringt mit
utilskiticonsectionrevealnumber-tickermotion
npm-Pakete
Keine
Sprachen
Englisch und Deutsch, 3 eigene Texte
Studio
Alle 8 Variants bearbeitbar
Mit KI bauen
Per MCP in Claude, Cursor, Copilot und Codex

Props

Die Schnittstelle StatsProps aus components/ui/stats.tsx. Beschreibungen stammen aus den Kommentaren im Code und sind auf Englisch.

  • variantoptional
    StatsVariant

    gridrowbig-numberscardswith-chartwith-descriptioncountersplit

  • eyebrowoptional
    React.ReactNode
  • titleoptional
    React.ReactNode
  • descriptionoptional
    React.ReactNode
  • actionsoptional
    React.ReactNode
  • statsPflicht
    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

Eingebaute Texte

Diese Texte schreibt Zahlen selbst. Die Sprache folgt dem KitProvider, über die Prop labels ersetzt du einzelne.

Alle 3 Texte anzeigen
vsEnglisch vs. last periodDeutsch zum Vorzeitraum
upEnglisch upDeutsch gestiegen
downEnglisch downDeutsch gesunken

Barrierefreiheit

Aus dem Quellcode der Component abgeleitet.

  • Ergänzt Text für Screenreader, wo Icons und Grafiken allein stehen.
  • Der Server rendert den Startzustand vollständig, JavaScript ergänzt nur die Interaktion.

Bewegung

  • Erscheint beim ersten Sichtkontakt mit einem kurzen Auftritt (kit-rise, useInView).
  • Bringt eigene Animationen mit, ruhig getaktet und ohne Wackeln.
  • Bei reduzierter Bewegung (prefers-reduced-motion) bleibt sie ruhig. 11 Stellen im Code schalten Bewegung dann ab.

Häufige Fragen

Wie installiere ich Zahlen?

Mit aiw add @ai-website/stats. Der Befehl legt die Datei components/ui/stats.tsx in dein Projekt, der Code gehört danach dir. Mit dabei sind icon, section, reveal, number-ticker und motion. Weitere npm-Pakete braucht sie nicht.

Welche Varianten hat Zahlen?

8 Varianten, Raster, Reihe mit Trennern, Große Zahlen, Karten, Mit Diagramm, Mit Beschreibung, Zähler und Geteilt mit Text. Du wählst sie mit der Prop variant, zum Beispiel variant="row".

Kann ich die Texte von Zahlen übersetzen?

Ja. Zahlen bringt 3 eigene Texte auf Deutsch und Englisch mit, etwa „zum Vorzeitraum“, „gestiegen“ und „gesunken“. Die Sprache folgt dem KitProvider, einzelne Texte ersetzt du über die Prop labels.

Kann ein KI-Assistent Zahlen einbauen?

Ja. Über den MCP-Server der aiw CLI finden Claude, Cursor, GitHub Copilot, Windsurf, Codex und Gemini Zahlen mit aiw_components und installieren sie mit aiw_add @ai-website/stats. Nenn im Prompt die Variante, etwa variant="grid", dann schreibt der Assistent deine Inhalte direkt in die Props.

Kann ich Zahlen ohne Code anpassen?

Ja, im Studio. Alle 8 Varianten lassen sich dort bearbeiten, Texte, Listen und Schalter. Das Studio schreibt den passenden Stats-Code zum Kopieren.

Ähnliche Components

Mehr aus Marketing, demselben Bereich des Kits.

Wird oft kombiniert mit

Sections, die auf einer Seite meist neben Stats stehen.

Oft gesucht

Direkt zu

In die Zwischenablage kopiert