Aurora Stats Overview
A premium dark-themed metrics overview section designed for analytics products and dashboards. Each card pairs a large headline metric with a miniature sparkline and trend indicator.
Features
- 6 metric cards — MAU, session duration, conversion rate, MRR, NPS, and churn in a responsive 3-column grid
- Inline SVG sparklines — Lightweight chart drawn from raw data arrays with gradient fill
- Trend indicators — Up/down arrows with color-coded change percentages in monospaced type
- Aurora backgrounds — Cyan, violet, and emerald gradient blobs create layered depth
- Hover effects — Cards lift with box-shadow and reveal a colored top accent line
- Staggered reveal — Blur-to-sharp entrance animation on each card
Dependencies
@/components/ui/badge — Shadcn Badge@remixicon/react — RiArrowUpLine, RiArrowDownLine, RiBarChartBoxLine
Customization
- Data: Swap the
metrics array with real values from your API
- Colors: Adjust the aurora blob colors and sparkline strokes
- Grid: Change to 2-column or single-column by modifying grid classes
- Background: Replace
#060611 with your brand dark tone
