Browse components

Metric Card

Compact dashboard metric with a trend badge and inline sparkline.

Add to your project

1Connect the Uniquel MCP

Connect Uniquel to your coding agent before using the component ID.

Connect MCP

2Copy the component ID

MCP ID
component:cards/metric-card

Works with your AI tools

ClaudeClaude*
CodexCodex*
LovableLovable
Base44Base44
Figma MakeFigma Make
ReplitReplit*
CursorCursor*
v0v0

* Compatible with most projects that use the default React/Next.js framework.

Built With

ReactTailwind CSS

Props

PropTypeDescription
labelstringMetric name
valuestringPrimary metric value
changestringTrend badge text
detailstringComparison caption
classNamestringStyles for the outer card

More Cards Components

Compact Card preview

Compact Card

Editorial card with a full-bleed image, story metadata, and optional link wrapper.

Horizontal Card preview

Horizontal Card

Side-by-side card with image, title, description, and a clear action.

Card Stack preview

Card Stack

Layered testimonial cards that cycle forward with a spring stack. Click the front card to advance.