caliper uidocs
DemoSign inGet Pro

Sparkline

Free

A tiny trend line with no axes, for use inside text and tables.

Installs components/ui/sparkline.tsxDepends on none beyond ReactMotion none in component source
pnpm dlx shadcn@latest add https://caliperui.site/r/sparkline.json

Signups

When to use #

Use it for

  • Showing direction of travel beside a value.
  • Table rows with a trend column.

Skip it when

  • Readers need exact values; use a chart with axes.

Installation #

terminal
pnpm dlx shadcn@latest add https://caliperui.site/r/sparkline.json

Adds its 2 files to components/ui/, each with its own stylesheet, and installs their packages. No account needed. The first part also adds Caliper UI’s tokens; import them once as in Installation.

Usage #

This is the code behind the preview above.

example.tsx
import { Sparkline } from "@/components/ui/sparkline"

export function TrendLine() {
  return (
    <p className="flex items-center gap-3 text-sm">
      Signups
      <span className="w-24"><Sparkline label="Signups, last 7 days" values={[4, 6, 5, 9, 8, 12, 14]} /></span>
    </p>
  );
}

API reference #

Sparkline

component

Also accepts the native props of its root element and a ref.

PropTypeDefault
values *readonly number[]—
label *string—

Accessibility #

It exposes img semantics, with aria-label kept in step with state.

No custom key handling; Tab and the native activation keys do the work.

Motion #

It declares no animation in its component source. Any transition comes from its stylesheet, which uses the duration tokens that collapse to instant under prefers-reduced-motion.