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)
/>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 | — |