Stat Card Area

Revenue stat card with a gradient area sparkline, hover-to-read values, NumberFlow, and trend badge

Installation

terminal

pnpm dlx layro-cli add @bklit/stat-card-area

npx layro-cli add @bklit/stat-card-area

npx layro-cli add @bklit/stat-card-area

bunx layro-cli add @bklit/stat-card-area

New project? Start with init. Writes third-party code and installs packages with scripts off.

Code

Dependencies

Demo

"use client";

import { AreaSparkline, ChartStatFlow } from "@/components/charts";
import {
  Card,
  CardAction,
  CardContent,
  CardHeader,
  CardTitle,
} from "@/components/ui/card";
import { revenueSeries, revenueStats } from "../data/revenue-series";
import {
  StatCardChart,
  statCardLabelClassName,