Metric Card

A metric card: the number large, the change with a sign and arrow, and history bars below — one figure never separates a trend from noise. From VibeUI — 1,600+ components with agent-ready install briefs at vibeui.club.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Metric Card to your project and fits it to your theme.

import { Card002 } from "@/components/ui/vibeui-card-002"

export default function Demo() {
  return <Card002 {...{"title":"Revenue this week","value":"$14,200","period":"vs. last week","changeLabel":{"up":"Change up {value} percent","down":"Change down {value} percent","flat":"No change"}}} />
}