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.

bash

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

Usage

tsx

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

Examples

Grid

Dashboard header

Revenue

$45,231

+20.1%

Users

2,350

+12.4%

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>