1 variant

Sparkline

A trend in the space of a word, for a table cell or beside a number, with a hover readout for the exact value.

Revenue$48.2K
Signups1,284
Churn2.1%

usage.tsx

import { Sparkline } from "@/components/registry/sparkline";

export function Trend() {
  return (
    <Sparkline
      values={[22, 24, 23, 27, 29, 33]}
      label="Revenue, last 6 weeks, up 50%"
      formatValue={(value) => `$${value}K`}
      area
    />
  );
}

"use client";

import { useReducedMotion } from "motion/react";
import { type PointerEvent, useId, useState } from "react";
import { seriesColor, useElementWidth, useSeen } from "@/components/registry/chart-core";
import { cn } from "@/lib/utils";

export interface SparklineProps {
  values: number[];
  /** Read out in place of the picture, such as "Revenue, last 12 weeks, up 18%". */
  label: string;
  /** One per value, shown in the hover readout: "Week 12". */

133 more lines ship with an easeUI Pro license.

Install

$ bunx --bun shadcn add @easeui-pro/sparkline