7onicDESIGN SYSTEM

MetricCard

A component for displaying KPIs and key metrics clearly in dashboards. Combine title, value, trend indicator, description, and icon freely.

3
Variants
3
Sizes
3
Trend
Pure
React

Playground

Preview
D

Revenue

$45,231

Increased+20.1%

vs last month

Preset
Variant
Size
Radius
Options
Trend
<MetricCard>
  <MetricCardHeader>
    <MetricCardTitle>Revenue</MetricCardTitle>
    <MetricCardSymbol><DollarSign /></MetricCardSymbol>
  </MetricCardHeader>
  <MetricCardValue>$45,231</MetricCardValue>
  <MetricCardTrend direction="up">+20.1%</MetricCardTrend>
  <MetricCardDescription>vs last month</MetricCardDescription>
</MetricCard>

Variants

Revenue

$3,500

Increased+8.1%

default

Revenue

$3,500

Increased+8.1%

elevated

Revenue

$3,500

Increased+8.1%

ghost

<MetricCard variant="default">...</MetricCard>
<MetricCard variant="elevated">...</MetricCard>
<MetricCard variant="ghost">...</MetricCard>

Sizes

sm
Padding16px
Valuetext-xl (20px)
Titletext-xs (12px)
Iconicon-sm (16px)
default
Padding20px
Valuetext-2xl (24px)
Titletext-sm (13px)
Iconicon-md (20px)
lg
Padding24px
Valuetext-3xl (30px)
Titletext-sm (13px)
Iconicon-lg (24px)

Responsive: default and lg sizes automatically reduce padding by one step on mobile (below 640px). sm is fixed.

Features

Grid Preview

Dashboard layout preview — use with grid-cols-2 lg:grid-cols-4 for 2×2 or 4-column layouts.

Revenue

$45,231

Increased+20.1%

vs last month

Users

2,350

Increased+12.5%

new signups

Orders

1,234

Decreased-3.2%

vs last week

Conversion

3.24%

No change0.0%

no change

<div className="grid grid-cols-2 lg:grid-cols-4 gap-4">
  <MetricCard>
    <MetricCardHeader>
      <MetricCardTitle>Revenue</MetricCardTitle>
      <MetricCardSymbol><DollarSign /></MetricCardSymbol>
    </MetricCardHeader>
    <MetricCardValue>$45,231</MetricCardValue>
    <MetricCardTrend direction="up">+20.1%</MetricCardTrend>
    <MetricCardDescription>vs last month</MetricCardDescription>
  </MetricCard>
  ...
</div>

Trend

Trend indicator automatically applies icon and color based on direction — uses icon + text to convey meaning, accommodating color vision deficiency.

Up

$3,500

Increased+8.1%

Down

$3,500

Decreased-3.2%

Neutral

$3,500

No change0.0%

<MetricCardTrend direction="up">+8.1%</MetricCardTrend>
<MetricCardTrend direction="down">-3.2%</MetricCardTrend>
<MetricCardTrend direction="neutral">0.0%</MetricCardTrend>

Radius

Radius

0

Radius

8

Radius

12

Radius

16

Radius

24

<MetricCard radius="none" />    {/* 0px */}
<MetricCard radius="lg" />     {/* 8px */}
<MetricCard />                 {/* 12px — default */}
<MetricCard radius="2xl" />    {/* 16px */}
<MetricCard radius="3xl" />    {/* 24px */}

API

Component Structure

MetricCard— Pure React
.Header.Title.Symbol.Value.TrendProps.Description

Props

MetricCard

variant"default"
"default" | "elevated" | "ghost"

Card style variant

size"default"
"sm" | "default" | "lg"

Card size (affects padding and font size)

radius"default"
"none" | "sm" | "base" | "default" | "lg" | "xl" | "2xl" | "3xl" | "full"

Card corner radius (follows design tokens)

animatedfalse
boolean

Animates MetricCardValue with a count-up effect

MetricCardTrend

direction—
"up" | "down" | "neutral"

Trend direction (required) — icon and color applied automatically

Anatomy

1
2
3
Monthly Revenue
4
5
$2.84M
6
+12.5%
vs last month
7

December 2024 actual

1
Root
Root container
2
Header
Header area
3
Title
Card title
4
Icon
Symbol icon
5
Value
Large value
6
Trend
Trend indicator
7
Description
Supplementary text

Best Practices

✓

Do

  • ✓Use color + icon + text together for trends
  • ✓Arrange cards evenly in a grid layout
  • ✓Format numbers for readability (comma-separated, etc.)
  • ✓Specify the comparison period with description text
✕

Don't

  • ✗Don't rely on color alone for trend direction — consider color blindness
  • ✗Don't place too many metric cards on a single screen
  • ✗Don't show numbers without context
  • ✗Don't mix different card sizes in the same grid

Accessibility

Keyboard

TabMove focus

ARIA / WCAG

  • Trend icon uses aria-hidden + sr-only text
  • Communicates meaning via icon + text, not color alone
  • Natural reading order (title → value → trend → description)
  • WCAG AA color contrast compliant