caliper uidocs
DemoSign inGet Pro

Line replay

Pro

A line chart that draws itself over time.

Installs components/ui/line-replay.tsxDepends on @radix-ui/react-slot, d3-shape, lucide-reactMotion honours reduced motion
pnpm dlx shadcn@latest add @caliper/line-replay
Monthly active teamsDec 2025: 6,258

Dec 2024: Public API released; growth speeds up.

Monthly active teams
PeriodValue
Jan 20231200
Feb 20231362
Mar 20231516
Apr 20231655
May 20231774
Jun 20231869
Jul 20231940
Aug 20231989
Sep 20232021
Oct 20232041
Nov 20232058
Dec 20232080
Jan 20242114
Feb 20242166
Mar 20242240
Apr 20242339
May 20242461
Jun 20242603
Jul 20242759
Aug 20242921
Sep 20243082
Oct 20243235
Nov 20243371
Dec 20243646
Jan 20253898
Feb 20254125
Mar 20254331
Apr 20254521
May 20254700
Jun 20254877
Jul 20255060
Aug 20255257
Sep 20255472
Oct 20255710
Nov 20255972
Dec 20256258

When to use #

Use it for

  • Telling a story step by step.

Skip it when

  • Readers need the full chart at once.

Installation #

terminal
pnpm dlx shadcn@latest add @caliper/line-replay

Adds its 4 files to components/ui/, each with its own stylesheet, and installs their packages. Pro installs with your access token, set up once per project. See Pro access. The first part also adds Caliper UI’s tokens; import them once as in Installation.

Usage #

Import it from your copy of the source. The example behind the preview comes with the source.

example.tsx
import { LineReplay } from "@/components/ui/line-replay"

The worked example comes with Pro

The 18-line example behind the preview opens here with a Pro or Team licence.

Checking your licence…

API reference #

LineReplay

component
PropTypeDefault
label *string—
values *readonly number[]—
xLabels *readonly string[]—
notesreadonly ReplayNote[][]
secondsnumber8
format((n: number) => string)(n) => String(n)
classNamestring—

Accessibility #

It exposes img and status semantics, with aria-label, aria-hidden and aria-valuetext kept in step with state. Changes that matter are announced through a live region.

KeyBehaviour
→Moves to the next item or value.
←Moves to the previous item or value.

Motion #

It checks prefers-reduced-motion itself and settles immediately instead of travelling. Every state is still reachable.