Metric Card
Data Display
Block
Display key metrics with values, trends, icons, and optional sparkline charts.
Preview
Metric cards in a responsive grid
Total Users
12,84712.5%
vs last month
Revenue
$48,2348.2%
vs last month
Orders
1,2843.1%
vs last month
Page Views
284,39124.3%
vs last month
Simple Metrics
Basic metric cards without icons
Active Users
2,847
Users online now
Bounce Rate
32.1%5.2%
Avg. Session
4m 23s8.7%
With Sparkline Charts
Metric cards with mini chart visualization
Revenue
$24,78014.5%
Users
3,8478.2%
Conversion
3.24%1.2%
Clickable Cards
Interactive metric cards
Compact Metrics
Smaller metric display for dense layouts
Total Sales
$12,847
Orders
284
Customers
1,847
Icon Colors
Available icon color variants
Slate
123
Indigo
456
Emerald
789
Rose
234
Amber
567
Violet
890
MetricCard Props
MetricCard API reference
| Prop | Type | Default | Description |
|---|---|---|---|
title* | string | — | Metric label |
value* | string | number | — | Metric value |
description | string | — | Additional context text |
trend | {value, direction, label?} | — | Trend indicator |
icon | ReactNode | — | Icon element |
iconColor | 'slate' | 'indigo' | 'emerald' | 'rose' | 'amber' | 'violet' | 'indigo' | Icon background color |
footer | ReactNode | — | Footer content |
onClick | () => void | — | Click handler |
MetricCardWithChart Props
MetricCardWithChart API reference
| Prop | Type | Default | Description |
|---|---|---|---|
...MetricCardProps | MetricCardProps | — | Inherits all MetricCard props |
chartData | number[] | — | Data points for sparkline |
chartColor | 'indigo' | 'emerald' | 'rose' | 'amber' | 'violet' | 'indigo' | Sparkline color |
Usage
Import and implementation examples
import { MetricCard, MetricCardWithChart, MetricCardGroup, CompactMetric } from '@/blocks/data-display/metric-card'
// Basic metric card<MetricCard title="Total Revenue" value="$48,234" trend={{ value: 12.5, direction: 'up', label: 'vs last month' }} icon={<DollarSign />} iconColor="emerald"/>
// With sparkline chart<MetricCardWithChart title="Active Users" value="3,847" trend={{ value: 8.2, direction: 'up' }} chartData={[45, 52, 38, 65, 48, 72, 58]} chartColor="indigo"/>
// Grid layout<MetricCardGroup columns={4}> <MetricCard title="Metric 1" value="100" /> <MetricCard title="Metric 2" value="200" /> <MetricCard title="Metric 3" value="300" /> <MetricCard title="Metric 4" value="400" /></MetricCardGroup>
// Compact inline<CompactMetric label="Sales" value="$12,847" change={{ value: 12, direction: 'up' }}/>This block is self-contained (no UI component dependencies)
Features
Built-in functionality
- Trend indicators: Up/down trends with color coding
- Icon support: Customizable icons with color themes
- Sparkline charts: Mini visualization of data trends
- Responsive grid: MetricCardGroup for easy layouts
- Compact variant: Dense display for sidebars
- Clickable cards: Interactive navigation support
- Dark mode: Full dark mode support
Accessibility
Accessibility considerations
ARIA Attributes
Semantic structure for metric labels and valuesTrend direction indicated by icon, not just colorClickable cards have proper button semanticsKeyboard Navigation
| Key | Action |
|---|---|
| Tab | Navigate to clickable metric cards |
| Enter/Space | Activate clickable cards |
Notes
- Color is supplemented with directional icons
- Charts are decorative and summarized in text
- Values are formatted for screen reader clarity