Stats Cards
Interactive statistics cards with icons, trends, and smooth animations for displaying key metrics.
Configuring your account...
Please wait while we prepare everything for you
Usage
import StatsCards from '@/components/bynanaui/stats-cards'
<StatsCards
title="Key Metrics"
description="Track your success with these important numbers"
stats={[
{
value: "2.5M",
label: "Revenue",
description: "Annual recurring revenue",
icon: "DollarSign",
trend: { value: "+12%", direction: "up" },
}
]}
/>Props
| Prop | Type | Default | Description |
|---|---|---|---|
title | string | "Key Metrics" | Main heading text |
description | string | "Track your success with these important numbers" | Subtitle text |
stats | Array<StatItem> | Default stats array | Array of statistics with icons and trends |
className | string | "" | Additional CSS classes |
StatItem Type
| Property | Type | Description |
|---|---|---|
value | string | The main statistic value |
label | string | Label for the statistic |
description | string | Optional description |
icon | string | Icon name from Lucide React |
trend | {value: string, direction: "up" | "down"} | Optional trend indicator |
Features
- Icon Integration: Uses Lucide React icons for visual enhancement
- Trend Indicators: Shows positive/negative trends with colors
- Hover Animations: Scale and shadow effects on hover
- Spring Animations: Smooth entrance animations with staggered delays
- Responsive Grid: Adapts from 1 to 4 columns based on screen size