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.
The import and the props worth knowing about, in one place.
import { Text17 } from "@/components/beste/component/text17";
import { useState } from "react";
const [season, setSeason] = useState(false);
<Text17 value={season ? 62 : 70} prefix="$" className="font-serif text-6xl" />
<Text17 value={2026} grouping={false} duration={1} />
// Or let it climb on its own: one every second, for a live counter
<Text17 value={1240} suffix="+" tick={1} />Turn the props on the right; the snippet under them is what you would write to get what you see.
import { Text17 } from "@/components/beste/component/text17";
<Text17
value={1240}
suffix="+"
tick={1}
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 show; change it and the digits roll to the new value |
prefix | string | — | |
suffix | string | — | |
grouping | boolean | — | Group thousands with separators |
duration | number | — | Seconds a digit takes to roll |
tick | number | — | Advance by one every `tick` seconds, for live counters and clocks. Leave unset for a controlled value. |
className | string | — |
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.
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.
A sentence that corrects itself: a line is drawn through the old word from left to right, and the better word settles in beside it out of a soft blur.
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.