Ridgeline

Activity by weekday
Point	Mon	Tue	Wed
0:00	11	10	10
2:00	13	11	10
4:00	19	13	11
6:00	31	19	13
8:00	44	31	19
10:00	50	44	31
12:00	44	50	44
14:00	31	44	50
16:00	19	31	44
18:00	13	19	31
20:00	11	13	19
22:00	10	11	13

When to use #

Use it for

Comparing how several groups are distributed over the same axis.
Daily patterns across weekdays.

Skip it when

A single distribution; use a histogram.

Installation #

terminal

pnpm dlx shadcn@latest add https://caliperui.site/r/ridgeline.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 { Ridgeline } from "@/components/ui/ridgeline"

export function WeekdayRidges() {
  const hours = Array.from({ length: 12 }, (_, index) => `${index * 2}:00`);
  const wave = (shift: number) => hours.map((_, index) => Math.round(10 + 40 * Math.exp(-Math.pow(index - shift, 2) / 6)));
  return (
    <div className="w-full max-w-xl">
      <Ridgeline label="Activity by weekday" xLabels={hours} rows={[{ id: "mon", label: "Mon", values: wave(5) }, { id: "tue", label: "Tue", values: wave(6) }, { id: "wed", label: "Wed", values: wave(7) }]} />
    </div>
  );
}

API reference #

component

PropTypeDefaultDescription

label *string—

rows *readonly RidgeRow[]—

xLabels *readonly string[]—One label per sample, shared by every row.

unitstring""

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

loadingboolean—

errorstring—

classNamestring—

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

KeyBehaviour

↑Moves to the previous item or value.

↓Moves to the next item or value.

→Moves to the next item or value.

←Moves to the previous item or value.

PageUpMoves by a larger step, or to the previous page.

PageDownMoves by a larger step, or to the next page.

HomeJumps to the first item or the minimum.

EndJumps to the last item or the maximum.

EnterActivates the focused control.

SpaceActivates the focused control.

EscapeCloses or cancels, then returns focus to where it came from.

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.

Ridgeline

When to use #

Use it for

Skip it when

Installation #

Usage #

API reference #

Ridgeline

Accessibility #

Motion #

Related #