Yami

Stat Card

A card that displays a metric with optional icon and delta.

Revenue
$45,231
+20.1%

Installation

Add the stat card component with the shadcn CLI.

npx shadcn@latest add https://yami.ui.unsanity.ai/r/stat-card.json

Usage

import { CreditCardIcon } from "lucide-react"

import { StatCard } from "@/components/ui/stat-card"

<StatCard
  label="Revenue"
  value="$45,231"
  delta="+20.1%"
  icon={<CreditCardIcon />}
/>

Examples

Grid

Dashboard header
Revenue
$45,231
+20.1%
Users
2,350
+12.4%

Code

import { CreditCardIcon, UsersIcon } from "lucide-react"

import { StatCard } from "@/components/ui/stat-card"

<div className="grid grid-cols-2 gap-4">
  <StatCard label="Revenue" value="$45,231" delta="+20.1%" icon={<CreditCardIcon />} />
  <StatCard label="Users" value="2,350" delta="+12.4%" icon={<UsersIcon />} />
</div>