Learning Path Map

Installation

pnpm dlx shadcn@latest add @cleverui/learning-path-map

Requires the @cleverui registry in your components.json, a one-off, two-line setup.

Usage

tsx

import { LearningPathMap } from '@/components/blocks/learning-path-map'

Exampletsx

import { LearningPathMap } from '@/components/blocks/learning-path-map'

export default function LearningPathMapDemo() {
  return (
    <div className="mx-auto w-full">
      <LearningPathMap
        heading="Your learning path"
        intro="Start at hello-world, leave with a specialization, every step builds on the last."
        currentIndex={2}
        currentLabel="You are here"
        steps={[
          {
            title: 'Programming foundations',
            tag: 'Foundations',
            blurb:
              'Variables, control flow, and the habits that keep small programs readable. Your first repo ships by Friday of week two.',
            duration: '4 weeks',
          },
          {
            title: 'Web craft studio',
            tag: 'Core',
            blurb:
              'HTML, CSS, and accessible components. You build a multi-page site a real small business could hand to a client.',
            duration: '6 weeks',
          },
          {
            title: 'Full-stack product lab',
            tag: 'Core',
            blurb:
              'APIs, databases, and auth on a shared product. Pair on a feature, open a pull request, and defend your design choices.',
            duration: '8 weeks',
          },
          {
            title: 'Data for builders',
            tag: 'Bridge',
            blurb:
              'SQL, event schemas, and honest dashboards. Learn enough analytics to ship decisions, not just charts.',
            duration: '4 weeks',
          },
          {
            title: 'Specialization track',
            tag: 'Specialization',
            blurb:
              'Pick platform engineering, product design systems, or applied ML. Capstone demo in front of hiring partners.',
            duration: '10 weeks',
          },
        ]}
      />
    </div>
  )
}

API reference

LearningPathMap accepts the following props.

Prop	Type	Default	Description
`heading`	`string`	`'Your learning path'`	–
`intro`	`string`	–	one encouraging plain sentence under the heading
`steps`*	`LearningPathStep[]`	–	–
`currentIndex`	`number`	`-1`	index of the 'you are here' milestone; -1 hides the marker
`currentLabel`	`string`	`'You are here'`	–

…plus everything from React.HTMLAttributes<HTMLElement>: className, event handlers, aria attributes and the rest pass straight through.

Referenced types

Typestsx

export interface LearningPathStep {
  title: string
  blurb?: string
  /** preformatted, e.g. '4 weeks', never derived from Date */
  duration?: string
  /** short quiet word like 'Foundations' or 'Specialization' */
  tag?: string
}

Related components

Curriculum Outline

A module-by-module curriculum accordion, week markers, lesson counts, and honest 'what you'll build' notes behind real disclosure semantics. A syllabus students can trust.

Admission Checklist

What you need to get in and what you can skip, admission requirements as an encouraging two-group checklist with real dl semantics. React and Tailwind block for course sites.

Alumni Story Cards

Graduate stories told as career arcs, from old job to new title, a short quote, cohort chip, and hired-in timeline. React and Tailwind alumni proof cards for course sites.

Cohort Countdown Strip

An enrolment-closing strip, seats left, a preformatted close date, and a compact rolling countdown pointing at one warm CTA. Encouraging urgency, not a fire alarm.

Course Card Grid

Friendly course cards with level chips, duration and next-cohort lines, outcome checklists, and one warm enrol CTA per card, the encouraging way a training site earns sign-ups.

Parents FAQ

The questions parents and skeptics actually ask, accreditation, refunds, job outcomes, answered plainly behind real disclosure semantics, with a talk-to-a-human fallback.

Frequently asked questions

How do I install the Learning Path Map component?

Register the @cleverui registry in your components.json ("@cleverui": "https://cleverops.com.au/r/{name}.json"), then run `npx shadcn@latest add @cleverui/learning-path-map`. The shadcn CLI copies the source into your project, you own the code from that point. You can also copy the source directly from this page.

What dependencies does Learning Path Map require?

Learning Path Map uses motion on top of React and Tailwind CSS. You don't need to install it manually, the shadcn CLI resolves and installs npm dependencies automatically when you add the component.

Can I theme Learning Path Map to match my brand?

Yes. The component is styled entirely with Tailwind utilities over standard design tokens (primary, background, muted, border), so it inherits your existing shadcn/ui theme automatically. Change your CSS variables and the component follows, no source edits needed for palette, radius, or fonts.

Preview & code