Back to Components
Stats Card
popularity exchange marketplace
An animated statistics card with trend indicators.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
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 |
Usage Examples
Negative Trend
import { StatsCard } from "@/showcase/stats-card";
import { Activity } from "lucide-react";
export default function NegativeTrendExample() {
return (
<StatsCard
title="Bounce Rate"
value={45}
icon={<Activity className="w-5 h-5" />}
trend="down"
trendValue="+5%"
gradient="from-red-500 to-orange-400"
description="Higher than average"
/>
);
}Key Features
- Number counting animation
- Customizable gradients
- Trend indicators (up/down)
- Icon support