Stats strip
ProThree or four numbers that prove the point, side by side with hairlines between them. They count up the first time they scroll into view.
npx prodular-ui add stats-stripPart of Prodular UI Pro. Preview and read the docs freely, install with a license. See pricing
Three numbers
Count up once in view; reduced motion shows the final numbers.
- 87%
- of invoices paid on time Across customers in Q3
- 21
- days to get paid Median, first 90 days
- 4.8
- average rating From 1,200 reviews
import { StatsStrip } from "@/components/ui/stats-strip"
export default function StatsStripProof() { return ( <StatsStrip className="w-full" items={[ { value: 87, suffix: "%", label: "of invoices paid on time", detail: "Across customers in Q3" }, { value: 21, label: "days to get paid", detail: "Median, first 90 days" }, { value: 4.8, decimals: 1, label: "average rating", detail: "From 1,200 reviews" }, ]} /> )}Anatomy
<StatsStrip items={[{ value: 87, suffix: "%", label: "of invoices paid on time" }]} />Guidance
Use it when
- Proof with numbers people can check.
- detail for where the number comes from.
Avoid
- Vanity numbers without a source.
- More than four items.
Rules for AI agents
Published in llms-full.txt, the registry and the MCP server, so coding agents follow them when they build with this component.
- Pass value as a number with prefix, suffix and decimals; never a preformatted string.
- Labels finish the sentence the number starts.
API
StatsStrip
| Prop | Type | Default | Description |
|---|---|---|---|
| items | { value, label, prefix?, suffix?, decimals?, detail? }[] | The numbers. |
Installation
The Prodular UI CLI adds the source to components/ui with everything it depends on. In a project that already uses shadcn/ui, the shadcn CLI installs it from the Prodular registry too. See Installation for the first setup.
npx prodular-ui add stats-strip# or, with the registry in components.jsonnpx shadcn@latest add @prodular/stats-strip