Free React Education & Course Components

Whether you sell a cohort course or run a training organisation, the questions are the same: what will I learn, who teaches it, what does it cost, and will it work for me. This set answers each one, a curriculum outline, learning path map, instructor panel, tuition payment options, admission checklist, cohort countdown, student outcomes band, alumni story cards, a study-mode comparison, and a parents FAQ for providers whose buyer is not the student. Built for course sites that need to earn trust before the enrol button.

12 components · MIT licensed · installable with the shadcn CLI

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.

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.

Instructor Panel

Educator bios that read like a good syllabus, plain-text credentials, an approachable register, and student-count tickers that prove the teaching miles without bragging.

Learning Path Map

Courses drawn as one connected path, milestone nodes running from basics to specialization along a drawn spine, with a warm 'you are here' marker set by a prop.

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.

Project Showcase Grid

Student work in a celebration grid, project titles, one-line briefs, tools chips, and a mono cohort tag over structural placeholder panels. Proof that students actually ship.

Student Outcomes Band

Outcome stats in the encouraging register, completion rate, career switches, and salary delta tick up once, each with a plain-language caption instead of a mono label.

Study Mode Compare

Online, on-campus, and hybrid study modes compared dimension by dimension, with a same-certificate reassurance line. A React and Tailwind comparison block for education sites.

Tuition Payment Options

One course, three honest ways to pay, upfront, monthly, or deferred, with plain totals and a shared includes list. A React and Tailwind tuition block for course sites.