Progress Path

#Installation & usage

Use a progress path for anything learned in order: a language course, an onboarding program, a training plan. Lessons are nodes on a trail that swings across the column, grouped into sections that each take a chart color and close on a trophy milestone. Each node wears a segmented ring, one segment per level of mastery. Lessons before the current one are done, the current one is an ink disc glowing in its section's color with a Start callout beside it, and the rest are locked. The trail is solid behind you and dotted ahead. For steps of a form, use a Stepper; for a pipeline's stages, a Stage Rail.

import { ProgressPath, type ProgressPathSection } from '@youj/react'

const sections: ProgressPathSection[] = [
  {
    id: 'basics',
    eyebrow: 'Section 1',
    title: 'Basics',
    lessons: [
      { id: 'greetings', title: 'Greetings', detail: '6 min', mastery: 4 },
      { id: 'numbers', title: 'Numbers', detail: '7 min', mastery: 1 },
      { id: 'basics-check', title: 'Basics checkpoint', milestone: true },
    ],
  },
]

<ProgressPath sections={sections} current="numbers" onSelect={(lesson) => open(lesson.id)} />

current is the lesson up next: those before it are done and those after it locked; null means the course is finished. Leave it out and the first lesson not fully mastered is up next. mastery counts the levels a lesson has mastered, out of levels (4 by default), and a done lesson at full mastery wears a crown. detail adds a mono line beside a lesson's title, and milestone draws a lesson as a trophy that closes its section. Sections take the chart colors in turn, or their own tone.

The trail swings wider as the column grows, and lesson titles sit beside their nodes once it's at least 32rem wide; narrower, the nodes carry the path alone. onSelect opens a lesson that's done or current. A locked one shakes its head and plays the error cue.

#Description

#Code