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-cardOther Examples
Negative Trend
Props
| Prop | Type | Default | Description |
|---|---|---|---|
className | string | - | Optional CSS classes to apply. |
title | string | Total Revenue | The stat title |
value | number | 12345 | The main stat value |
icon | ReactNode | <Activity /> | Icon rendered in a circle on the right |
trend | 'up' | 'down' | up | Direction of the trend |
trendValue | string | +12% | The trend percentage or string |
gradient | string | from-[oklch(0.65_0.25_270)] to-[oklch(0.55_0.2_300)] | Tailwind gradient class for background |
description | string | - | A short description below the value |
variant | "default" | "destructive" | "success" | "blue" | "default" | The visual variant of the stats card. |
...props | React.HTMLAttributes<HTMLDivElement> | - | Accepts all standard HTML attributes (id, style, etc). |