0+Components
0+GitHub Stars
0+Downloads
0+Contributors
Installation
Usage
import { AnimatedCounter, StatCard } from "@/components/pioneerui/animated-counter"
// Single counter inline
export function Headline() {
return (
<h2 className="text-4xl font-bold">
<AnimatedCounter to={10000} suffix="+" duration={2} /> users
</h2>
)
}
// Pre-built stats row
export function Stats() {
return (
<StatCard
stats={[
{ label: "Components", value: 50, suffix: "+" },
{ label: "Stars", value: 3200 },
{ label: "Downloads", value: 18500, suffix: "+" },
{ label: "Contributors", value: 94 },
]}
/>
)
}Props — AnimatedCounter
| Prop | Type | Default | Description |
|---|---|---|---|
to | number | — | Target number |
from | number | 0 | Starting number |
duration | number | 2 | Animation duration in seconds |
prefix | string | "" | Shown before the number (e.g. "$") |
suffix | string | "" | Shown after the number (e.g. "+") |
decimals | number | 0 | Decimal places |
Props — StatCard
| Prop | Type | Description |
|---|---|---|
stats | Array<{ label, value, prefix?, suffix?, decimals? }> | Array of stat items |