elorm/ui

Stat Card

A dashboard stat card with optional trend indicator.

Saved preference for elorm init --ui-library base-ui
Monthly revenue
+12%
$12,420

+12% from last month

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

export function StatCardDemo() {
  return (
    <div className="w-full max-w-sm">
      <StatCard
        title="Monthly revenue"
        value="$12,420"
        description="+12% from last month"
        trend={{ value: "+12%", positive: true }}
      />
    </div>
  )
}

Installation#

Usage#

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

A dashboard stat card with optional trend indicator.

Empty StatePage Header