MarovStudio
Back to marketplace

Stat Card

Stat card with a trend delta

Data displaystatskpidashboardmetrictrend
FullscreenCreate free account

Revenue

₼12,480

+12.4%vs last month

Refunds

₼310

−4.1%vs last month

Code locked
import { TrendingDown, TrendingUp } from "lucide-react";

export function StatCard() {
  const stats = [
    { label: "Revenue", value: "$12,480", delta: "+12.4%", up: true },
    { label: "Refunds", value: "$310", delta: "-4.1%", up: false },
  ];

Sign in to see the code

Create a free account to copy the full source, usage snippet and AI prompt of every component.

Create free accountSign in

Free — no card required.

Related components

AMRSKVTL+8

Avatar Group

Data display · Overlapping avatar stack

4 out of 5

Rating Stars

Data display · Star rating with hover and click

  1. Order placed

    09:12

  2. Payment confirmed

    09:13

  3. Packed

    11:40

  4. Out for delivery

    —

Timeline

Data display · Timeline for order tracking