0+
A figure that counts up from zero to its value the first time it scrolls into view, with a prefix, a suffix, decimals and thousands grouping, in tabular numerals so nothing shifts.
The import and the props worth knowing about, in one place.
import { Text7 } from "@/components/beste/component/text7";
<Text7 value={2400} suffix="+" as="p" className="font-serif text-6xl" />
<Text7
value={4.9}
decimals={1}
prefix=""
duration={2} // seconds
grouping={false} // no thousands separators (years, codes)
/>Turn the props on the right; the snippet under them is what you would write to get what you see.
0+
import { Text7 } from "@/components/beste/component/text7";
<Text7
value={2400}
suffix="+"
as="p"
className="font-serif text-5xl leading-none tracking-tight text-foreground md:text-6xl"
/>Read from the component's own type, so this cannot drift from what it accepts.
| Prop | Type | Default | Description |
|---|---|---|---|
value* | number | — | The number to count up to |
prefix | string | — | Printed before the number, e.g. "$" |
suffix | string | — | Printed after the number, e.g. "%" or "+" |
decimals | number | — | Decimal places to show |
duration | number | — | Seconds the count takes |
delay | number | — | Seconds before the count starts |
grouping | boolean | — | Group thousands with separators |
as | "p" | "span" | "dd" | "strong" | — | |
className | string | — |
A number whose digits roll like an odometer, each column sliding to its new figure a beat after the last, whenever the value changes. For prices that switch with a toggle, years, and live counters that climb on their own.
A sentence whose one word takes turns: each candidate blurs up into place as the last blurs out, on a timer that stops when reduced motion is preferred.
A line of text set around a circle that turns slowly, with room in the middle for an initial, an icon or a short word. A seal for corners, footers and hero edges.
Lines of text that rise into view out of their own clipped rows, one after another, the way a heading is unmasked line by line.