Stats Card
An animated statistics card with trend indicators.
Installation
Full Setup guideInstall the component automatically via Shadcn CLI.
npx shadcn@latest add https://www.grettech.com/api/registry/stats-cardProps
| Prop | Type | Default | Description |
|---|---|---|---|
title | string | "Total Revenue" | Label above the value. |
value | number | 12345 | The number to show. It counts up when the card scrolls into view, and animates again when it changes. |
icon | React.ReactNode | <Activity /> | Icon shown in the gradient tile on the right. |
trend | "up" | "down" | "up" | Direction of the trend arrow: green for up, red for down. |
trendValue | string | "+12%" | Text next to the arrow. The trend row only shows when both trend and trendValue are set. |
description | string | - | Text after the trend value. Only shown with the trend row. |
variant | "default" | "destructive" | "success" | "blue" | "default" | Preset accent gradient. Ignored when gradient is set. |
gradient | string | - | Tailwind gradient stops for the accent line and icon tile, e.g. "from-red-500 to-orange-400". Overrides variant. |
className | string | - | Extra classes for the card. |
...props | React.HTMLAttributes<HTMLDivElement> | - | Any other attributes (id, style, aria-*, etc.), passed to the card. |