Skip to main content
Version: Next

MetricCard

MetricCard is the dashboard-friendly alias for Stat with the framed card treatment enabled by default. It works well for KPI grids, overview pages, and compact analytics summaries.

Basic usage​

Live Editor
function RevenueCard() {
  return (
    <ThemeProvider>
      <MetricCard
        label="Revenue"
        value="$42,300"
        meta="Monthly recurring"
        trend="+12%"
        icon={<Icon name="chart-bar" size={16} aria-hidden="true" />}
      />
    </ThemeProvider>
  );
}
Result
Loading...

With animated values​

import { AnimatedNumber, MetricCard } from '@editora/ui-react';

function ActiveSeatCard() {
  return (
    <MetricCard
      label="Active seats"
      value={<AnimatedNumber value={1284} variant="inline" animate animateOnMount />}
      meta="Live sessions"
      trend="+8%"
      tone="brand"
    />
  );
}

Notes​

  • MetricCard accepts the same props as Stat, except variant is fixed to the card treatment.
  • Use MetricCard when the surrounding layout expects balanced tiles; use Stat when you need lighter-weight metric grouping.