---
url: https://docs.tailor.tech/app-shell/components/metric-card.md
description: >-
  Compact card for dashboard KPI summaries with title, value, optional trend and
  description
---

# 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

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

## Basic Usage

```tsx
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).

```tsx
<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

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

## Related

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