3 variants

KPI Card

The numbers a dashboard leads with. A stat tile with change and trend, a value against its goal, and a total split into its parts.

Stat

Label, value, the change against a named period colored by whether it is good news, and an optional sparkline.

Monthly revenue

$48.2K

+12.4%vs last month

Churn

2.1%

−8.0%vs last month

usage.tsx

import { KpiCard } from "@/components/registry/kpi-card";

export function Revenue() {
  return <KpiCard label="Monthly revenue" value="$48.2K" delta={0.124} deltaLabel="vs last month" />;
}

"use client";

import { ArrowDownRight, ArrowUpRight } from "lucide-react";
import { Sparkline } from "@/components/registry/sparkline";
import { cn } from "@/lib/utils";

export interface KpiCardProps {
  /** Sentence case, no trailing colon: "Monthly revenue". */
  label: string;
  /** Already formatted, so the caller decides: "$48.2K", "1,284", "99.97%". */
  value: string;
  /** Change as a fraction, 0.124 for +12.4%. */

54 more lines ship with an easeUI Pro license.

Buy a license

Install

$ bunx --bun shadcn add @easeui-pro/kpi-card

Target

A value against its goal with a bar filling toward it and a tick for how far through the period we are.

Q3 new revenue

74% of goal

$184K/ $250K

On pace to reach the goal.

usage.tsx

import { KpiTarget } from "@/components/registry/kpi-target";

export function Goal() {
  return <KpiTarget label="Q3 new revenue" value={184000} target={250000} elapsed={0.68} />;
}

"use client";

import { useReducedMotion } from "motion/react";
import { useRef } from "react";
import { seriesColor, useSeen } from "@/components/registry/chart-core";
import { cn } from "@/lib/utils";

export interface KpiTargetProps {
  label: string;
  value: number;
  target: number;
  formatValue?: (value: number) => string;

76 more lines ship with an easeUI Pro license.

Buy a license

Install

$ bunx --bun shadcn add @easeui-pro/kpi-target

Split

A total and what it is made of. One bar split into its parts, with every part's value and share.

Revenue this month

$48.2K

Subscriptions31.2K65%
Seats9.8K20%
Usage5.1K11%
Services2.1K4%

usage.tsx

import { KpiSplit } from "@/components/registry/kpi-split";

export function Split() {
  return (
    <KpiSplit
      label="Revenue this month"
      value="$48.2K"
      parts={[{ label: "Subscriptions", value: 31200 }, { label: "Usage", value: 5100 }]}
    />
  );
}

"use client";

import { useReducedMotion } from "motion/react";
import { useRef } from "react";
import { seriesColor, useSeen } from "@/components/registry/chart-core";
import { cn } from "@/lib/utils";

/** Each pill fills in this long, starting just before the one before it finishes, so they land in sequence. */
const SEGMENT_MS = 320;

export interface KpiSplitPart {
  label: string;

70 more lines ship with an easeUI Pro license.

Buy a license

Install

$ bunx --bun shadcn add @easeui-pro/kpi-split