A free course pagethat is actually good.

The complete flagship demo and the whole design system, MIT-licensed on GitHub. No email, no signup wall, no watermark, nothing that expires. If it gets your course live and you never buy the kit, that is a fine outcome for both of us.

Clone on GitHub See what you get

MIT for personal projects · Next.js 16 · no runtime dependencies

Online course

Free

The long-form flagship: hero, curriculum accordion, bonus stack, two-tier pricing and an enrolment deadline.

View demo→

The honest version

What's in it, and what isn't

Both lists in full, because finding out after you clone it is worse than reading it now.

In the free version

The flagship demo, complete: The full online-course page — hero, curriculum accordion, bonus stack, pricing, countdown, testimonials, FAQ. Not a stripped-back version of it.
The whole design system: Colour, type scale, spacing, radii, shadows, easing, the grain and grid textures, and the CSS motion layer. Every token the paid demos use.
Twenty-two components: Every component the course page is built from — nav, hero, curriculum, bento, comparison, countdown, pricing table, testimonials, guarantee, sticky bar and the rest. Enough to build a different page shape of your own.
The deploy guide: The same README the paid version ships with, written for someone who has never deployed anything: clone, edit one file, push, connect Vercel or Cloudflare.

Only in the paid kit

The other five demos — cohort, webinar, coaching, newsletter, ebook.
The ten components those pages need: signup form, cohort card, week timeline, seats meter, book mock, sample spread, process steps, issue list, preview card, code block.
The programmatic SEO route, the sitemap and the robots file.
The commercial licence. Free is for your own project, not a client's.

What the paid kit adds

Four commands

Running on your machine in a minute

Then you edit one file. Course name, price, modules, testimonials and FAQ all live in a typed data file that reads like a list — and TypeScript tells you if you miss a field instead of the page rendering blank.

terminal

git clone https://github.com/slince-zero/course-kit-free
cd course-kit-free
npm install
npm run dev

Node 20 or newer. Then open localhost:3000.

src/data/course.ts

// src/data/course.ts — change these, not the components
export const course = {
  name: "Typeset",
  subtitle: "A 6-week typography course for product designers",
  enrolmentDeadline: "2026-09-14T23:59:00Z",
  price: 349,
  compareAt: 495,
  paymentPlan: "or 3 × $125 — no interest",
  checkoutUrl: "https://gumroad.com/l/your-course",
};

export const modules = [
  {
    title: "The modular scale",
    summary: "A size system you never have to argue about again.",
    lessons: [
      { title: "Ratios, and why 1.618 is usually wrong", length: "16 min" },
      { title: "Fluid type with clamp() without breaking rhythm", length: "22 min" },
    ],
  },
];

The whole content layer for the flagship page. Change these strings, not the components.

When you are happy with it: npm run build writes a plain out/ folder. Drag it onto Netlify, or connect the repository to Vercel and every push deploys itself. Both free tiers are genuinely enough for a static site.

Questions

About the free version

Is it really free, or is it a trial?+

Free, MIT-licensed, no email required and nothing expires. Clone it and it keeps working — there is no key to renew and no phone-home in the code, which you can verify because you have all of it.

What's the catch?+

That you might want the other five pages. The free version is the flagship course page and the design system, which is genuinely enough to launch one course; the paid kit is the other five page types, the rest of the components and the SEO pages.

Can I use it for a client?+

Not on the free licence — that covers your own projects. The Complete licence covers one commercial project and Extended covers unlimited client work, including handing the finished site over.

Do I need a GitHub account?+

No. Use the green Code button to download a zip, unzip it, npm install, npm run dev. An account only matters when you want Vercel to deploy from a repository, which is the easiest way to keep it updated.

Will the free version get updates?+

Yes, the same ones — the design system is shared, so fixes land in both. Star the repository if you want to hear about them.