MetricCard

MetricCard is a presentational card for displaying a single KPI (key performance indicator) on dashboards. It shows a small title, a prominent value, and optionally a trend indicator and supplementary description text. In v1 the component is static (no click handler or internal actions).

Import

import { MetricCard } from "@tailor-platform/app-shell";

Basic Usage

function BasicUsage() {
  return (
    <MetricCard
      title="Net total payment"
      value="$1,500.00"
      trend={{ direction: "up", value: "+5%" }}
      description="vs last month"
    />
  );
}

Props

Generated from the type surface — first-party props only.

MetricCardProps

Prop	Type	Default	Description
className?	string	-	Additional CSS classes for the card container
description?	string	-	Optional supplementary description (e.g. "vs last period", "this week"). Empty strings are treated as absent and the description is not rendered in the meta row.
icon?	ReactNode	-	Optional leading icon
title	string	-	Metric title / header (e.g. "Net total payment")
trend?	MetricCardTrend	-	Optional trend indicator
value	ReactNode	-	Primary value (e.g. formatted currency or number)

Exports

• MetricCard — function
• MetricCardProps — interface

Trend Directions

• up — Positive change (success styling, e.g. green).
• down — Negative change (destructive styling, e.g. red).
• neutral — No change or neutral (muted styling).

<MetricCard
  title="Revenue"
  value="$2,400"
  trend={{ direction: "up", value: "+12%" }}
  description="vs last month"
/>

<MetricCard
  title="Costs"
  value="$800"
  trend={{ direction: "down", value: "-5%" }}
  description="vs last quarter"
/>

<MetricCard
  title="Balance"
  value="$0"
  trend={{ direction: "neutral", value: "0%" }}
/>

With Icon

<MetricCard title="Total orders" value="142" icon={<OrderIcon />} description="this week" />

Related

• Grid — Arrange MetricCards in responsive columns (e.g. KPI grids).
• Layout — Page layout for placing MetricCards in a grid.
• DescriptionCard — Structured key-value cards for detail views.
• Badge — Status badges that can complement metric displays.