Slope chart

Free

Items connected between two moments to show who rose and who fell.

Installs components/ui/slope-chart.tsxDepends on d3-shapeMotion none in component source

pnpm dlx shadcn@latest add https://caliperui.site/r/slope-chart.json

Satisfaction before and after

Satisfaction before and after
Item	2025	2026	Change	Rank
Docs	62	78	16	2 to 1
Support	71	69	-2	1 to 2
Billing	48	66	18	3 to 3

When to use #

Use it for

Before and after comparisons.
Two time points across many items.

Skip it when

More than two time points; use a bump chart.

Installation #

terminal

pnpm dlx shadcn@latest add https://caliperui.site/r/slope-chart.json

Adds its 3 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 { SlopeChart } from "@/components/ui/slope-chart"

export function BeforeAfter() {
  return (
    <div className="w-full max-w-md">
      <SlopeChart
        label="Satisfaction before and after"
        startLabel="2025"
        endLabel="2026"
        data={[
          { id: "docs", label: "Docs", start: 62, end: 78 },
          { id: "support", label: "Support", start: 71, end: 69 },
          { id: "billing", label: "Billing", start: 48, end: 66 },
        ]}
      />
    </div>
  );
}

API reference #

SlopeChart

component

PropTypeDefault

label *string—

data *readonly SlopeItem[]—

startLabel *string—

endLabel *string—

formatValue((value: number) => string)numberText

loadingboolean—

errorstring—

classNamestring—

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.