MarketingStats
A marketing stats band: an optional heading above a grid of big-number tiles (value, label, optional context). Distinct from app-stats — no change deltas, larger typography, designed for landing-page 'by the numbers' sections. Presentational and theme-driven.
Installation
pnpm dlx @hex-core/cli add marketing-statsUsage
import { MarketingStats } from "@/components/ui/marketing-stats"By-the-numbers band
Three big-number tiles below the hero.
import { MarketingStats } from "@hex-core/components";
<MarketingStats
eyebrow="By the numbers"
title="Teams that ship faster"
stats={[
{ value: "12,480", label: "Active teams", description: "Across 64 countries." },
{ value: "$48M", label: "Shipped value", description: "Revenue unlocked." },
{ value: "99.9%", label: "Uptime", description: "Last 12 months." },
]}
/>Variant values
columnsTiles per row on desktop.| Value | Description |
|---|---|
threedefault | Three across. |
four | Four across. |
API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
statsrequired | object | — | ReadonlyArray<{ value; label; description? }>. The tiles. value is the big number, label is the short label under it, optional description is a one-line context. |
eyebrow | ReactNode | — | Section eyebrow above the title. |
title | ReactNode | — | Section heading. |
description | ReactNode | — | Section subcopy below the heading. |
columns | enum | three | Tiles per row on ≥lg: 'three' or 'four'. |
className | string | — | Additional classes applied to the root <section>. |
AI Guidance
When to use
Use below the hero or features to show 'by the numbers' impact (customer count, scale, uptime). Three big numbers read best; four when the metrics are shorter.
When not to use
Don't use for in-app KPIs (use app-stats — has change deltas). Don't fabricate numbers — surface real metrics.
Common mistakes
- Padding labels with the metric type (e.g. 'Active users (count)') — the value carries the meaning, the label stays short.
- Stuffing 5+ tiles into 'three' columns — use 'four' or split into two sections.
- Using app-stats-style change deltas — marketing-stats is for static milestones, not trending metrics.
Accessibility
Renders a <dl> with each tile as a <dt>/<dd> pair, so screen readers parse 'label / value' associations. The value uses 'order-first' on flex to render visually above the label while keeping the semantic dt→dd order.
Related components
Token budget: 912
Verified against @hex-core/components@1.14.0