ComponentsMetric Card

Metric Card

A beautiful, interactive KPI card component built to highlight key dashboard metrics. Features icon slots, automatic trend direction formatting, custom color inversion for metrics where 'lower is better', and integrated sparkline area charts.

React

Recharts

KPI

Interactive Demo

A dashboard overview layout showing standard, text-only, sparkline, and custom trend inverted metric cards.

Total Revenue

$45,231.89

+20.1%from last month

Active Users

+12,482

+10.5%from last week

Bounce Rate

42.3%

-8.2%vs yesterday

Server Alerts

+150%over last 24h

Installation

Install the MetricCard component.

pnpm dlx shadcn@latest add https://micto-ui-kit.misangono.net/r/micto/metric-card.json

Basic Usage

Render a simple value with a title and an icon slot.

import { MetricCard } from "@/components/micto/metric-card";
import { DollarSign } from "lucide-react";

export default function SimpleMetric() {
  return (
    <MetricCard
      title="Total Revenue"
      value="$45,231.89"
      icon={DollarSign}
    />
  );
}

Trend Indicators

Pass a trend value to automatically color and select the correct trending icon.

import { MetricCard } from "@/components/micto/metric-card";
import { Users } from "lucide-react";

export default function TrendMetric() {
  return (
    <MetricCard
      title="Active Users"
      value="12,482"
      icon={Users}
      trend={10.5} // Renders as +10.5% in green with a TrendingUp arrow
      trendLabel="from last week"
    />
  );
}

Inverted Trends (Lower is Better)

For metrics where a drop is good (like bounce rate, server errors, or churn), set invertTrendColors={true} to flip the green/red coloring.

import { MetricCard } from "@/components/micto/metric-card";
import { Activity } from "lucide-react";

export default function InvertedTrendMetric() {
  return (
    <MetricCard
      title="Bounce Rate"
      value="42.3%"
      icon={Activity}
      trend={-8.2} // A negative bounce rate is GOOD!
      trendLabel="vs yesterday"
      invertTrendColors={true} // Reverses colors: negative renders in green (good)
    />
  );
}

Sparkline Charts

Pass a datasets and chart configuration to render a clean, bottom-anchored area sparkline that fills the width of the card card.

import { MetricCard } from "@/components/micto/metric-card";
import { DollarSign } from "lucide-react";
import { ChartConfig } from "@/components/ui/chart";

const chartData = [
  { month: "Jan", revenue: 2000 },
  { month: "Feb", revenue: 3500 },
  { month: "Mar", revenue: 3000 },
  { month: "Apr", revenue: 4800 },
];

const chartConfig = {
  revenue: {
    label: "Revenue",
    color: "hsl(var(--primary))",
  },
} satisfies ChartConfig;

export default function SparklineMetric() {
  return (
    <MetricCard
      title="Revenue Trend"
      value="$45,231.89"
      icon={DollarSign}
      trend={20.1}
      trendLabel="from last month"
      chartData={chartData}
      chartConfig={chartConfig}
      chartDataKey="revenue"
    />
  );
}

MetricCard API Reference

Configure the metric card component using the following options.

Prop	Type	Default	Description
title	string		The label for the metric (e.g. 'Total Revenue').
value	string \| number		The primary highlighted quantitative value.
icon	ElementType	undefined	Optional Lucide icon displayed in the top right.
trend	number	undefined	The percentage change value (renders with arrow icons and +/- tags automatically).
trendLabel	string	undefined	Contextual label for the trend (e.g. 'from last month').
invertTrendColors	boolean	false	If true, negative trends are colored green (good) and positive trends are colored red (bad).
chartData	any[]	undefined	Optional array of mock data points to render a bottom sparkline chart.
chartConfig	ChartConfig	undefined	The Shadcn chart configuration object defining labels and HSL color variables.
chartDataKey	string	'value'	The data property key used to render the Area y-axis value.
className	string	undefined	Custom class names applied to the container Card.

PreviousFile Uploader NextPermission Guard