Stat Card Line

Sessions stat card with a line sparkline, hover-to-read values, overlaid NumberFlow, and trend badge

Installation

terminal

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

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

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

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

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

Code

Dependencies

Demo

"use client";

import { ChartStatFlow, LineSparkline } from "@/components/charts";
import {
  Card,
  CardAction,
  CardContent,
  CardHeader,
  CardTitle,
} from "@/components/ui/card";
import { sessionsSeries, sessionsStats } from "../data/sessions-series";
import {
  StatCardChart,
  statCardLabelClassName,