Skip to content
caliper ui docs
DemoSign inGet Pro

Pro

Lesson path

A course as a winding path of round lessons: finished ones are filled with a tick, the current one bobs gently under a Start flag, and locked ones wait in grey. Each node opens a small card with Start, Practise again, or what unlocks it.

Pro
pnpm dlx shadcn@latest add @caliper/lesson-path

Spanish, unit 1

Three lessons done; the next one is waiting.

Press a lesson.

Installs components/ui/lesson-path.tsxDepends on @radix-ui/react-popover, @radix-ui/react-slot, lucide-reactMotion none in component source

When to use

Use it for

  • Learning products, onboarding courses and challenge programmes.
  • Any sequence where people return to the next step.

Skip it when

  • Steps people do once in one sitting; use `Stepper`.
  • Non-linear content people browse freely.

Decisions

Why it is built this way, so you know what to keep when you change your copy.

Behaviour

Opens where you are
The path scrolls itself so the current lesson is centred, inside its own container, without moving the page.
Locked is still reachable
Locked lessons stay focusable and their card says what unlocks them, instead of being silently disabled.

Styling

Depth from the face
Nodes have the same pressed-edge depth as PushButton: green once done, the accent for the current lesson, grey while locked.

Installation

terminal
pnpm dlx shadcn@latest add @caliper/lesson-path

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 { LessonPath } from "@/components/ui/lesson-path"

The worked example comes with Pro

The 34-line example behind the preview opens here, ready to copy.

  • 576 Pro parts, blocks and page templates, all with source
  • $199 once, with a year of updates. What you have stays yours
  • A full refund within 14 days if it is not for you
Checking your licence…

API reference

LessonPath

component

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

PropTypeDefaultDescription
lessons *Lesson[]—
onStart((lesson: Lesson) => void)—
startLabelstring"Start"Label of the start button.
swingnumber64How far the path swings left and right, in px.

Accessibility

It is built on native elements and keeps aria-label and aria-hidden in step with state.

Keyboard and focus handling comes from Radix popover: arrow keys move through items, Enter and Space select, and Escape closes and returns focus.

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.

All Compare & browse examples