Metric Card

npx shadcn@latest add https://ui.saasflare.io/r/metric-card.json

pnpm add @saasflare/ui

"use client"import { MetricCard } from "@saasflare/ui"/** A dashboard KPI card with a trend indicator. */export function Demo() {    return (        <MetricCard            className="w-full max-w-sm"            label="Monthly Recurring Revenue"            value="$48,200"            trend={{ value: 8.2, direction: "up" }}        />    )}

"use client"import { MetricCard } from "@saasflare/ui"const METRICS = [    { label: "Active Users", value: "12,840", trend: { value: 12.5, direction: "up" } as const },    { label: "Churn Rate", value: "2.1%", trend: { value: 0.4, direction: "down" } as const },    { label: "Avg. Session", value: "8m 12s", trend: { value: 0, direction: "flat" } as const },]/** A row of KPI cards covering up, down, and flat trends. */export function Demo() {    return (        <div className="grid w-full gap-4 sm:grid-cols-3">            {METRICS.map((metric) => (                <MetricCard                    key={metric.label}                    label={metric.label}                    value={metric.value}                    trend={metric.trend}                />            ))}        </div>    )}

"use client"import { MetricCard } from "@saasflare/ui"/** * Usage metrics carry a denominator. `description` is the line that turns * "1,240" into something a customer can act on. */export function Demo() {    return (        <div className="grid w-full gap-4 sm:grid-cols-3">            <MetricCard label="Credits left" value="1,240" description="of 5,000 this cycle" />            <MetricCard                label="Seats used"                value="7"                description="of 10 — 3 invites pending"                trend={{ value: 16.7, direction: "up" }}            />            <MetricCard label="Storage" value="18.2 GB" description="of 50 GB included" />        </div>    )}