Stat Card
Displays statistical information using an icon, an animated numerical value, and a descriptive label.
0min
Installation Time
Usage
import { StatCard, StatCardContent, StatCardIcon, StatCardLabel, StatCardNumber,} from "@/app/_components/ui/stat-card";<StatCard> <StatCardContent> <StatCardIcon icon={Hourglass} /> <StatCardNumber value={5} suffix="min" /> <StatCardLabel>Stat Card Label</StatCardLabel> </StatCardContent></StatCard>Props
StatCard
| Name | Type | Default | Description |
|---|---|---|---|
children | ReactNode | - | The content to be displayed. |
className | string | - | Additional classes. |
StatCardContent
| Name | Type | Default | Description |
|---|---|---|---|
children | ReactNode | - | The content to be displayed. |
className | string | - | Additional classes. |
StatCardIcon
| Name | Type | Default | Description |
|---|---|---|---|
className | string | - | Additional classes. |
icon* | LucideIcon | - | The icon to be displayed. |
StatCardLabel
| Name | Type | Default | Description |
|---|---|---|---|
children | ReactNode | - | The content to be displayed. |
className | string | - | Additional classes. |
StatCardNumber
| Name | Type | Default | Description |
|---|---|---|---|
value* | number | - | The numerical value to display. |
suffix | string | - | The suffix to display after the numerical value. |
duration | number | 2 | The duration of the animation in seconds. |
decimals | number | 0 | The number of decimals to display. |