Metric Card

cardfrom Fintech Light

Live

AI Usage Rules

Use green for positive changes, red for negative. Show percentage or absolute change.

Code Template

<div className="bg-white rounded-lg border border-slate-200 p-6"><div className="flex items-center justify-between"><span className="text-sm font-medium text-slate-500">{label}</span>{icon}</div><div className="mt-2 text-3xl font-bold text-slate-900">{value}</div><div className="mt-1 flex items-center text-sm"><span className="{changeColor}">{changeIcon} {changeValue}</span><span className="ml-2 text-slate-500">vs last period</span></div></div>

Props Schema

Property	Type	Default
label	string	—
value	string	—
changeColor	string	—
changeValue	string	—

View raw JSON schema

{
  "type": "object",
  "properties": {
    "label": {
      "type": "string"
    },
    "value": {
      "type": "string"
    },
    "changeColor": {
      "type": "string"
    },
    "changeValue": {
      "type": "string"
    }
  }
}