Staaarter

Course Enrollment Waitlist

A centered coming-soon screen for a course that hasn't opened enrollment yet. Shows a start-date/length/format details grid, a working waitlist email form with a confirmation state, and a syllabus card listing numbered lessons.

By Staaarter Team
Coming Soon
Docs
Live preview

Docs

Installation

A real shadcn registry command, not a copy-paste stand-in: it fetches this block plus its dependencies and any missing npm packages, and installs them straight into your project.

npx shadcn add https://staaarter.com/r/course-enrollment-waitlist.json

Prefer not to use the CLI? Copy the source from the Code toggle above into src/components/blocks/coming-soon/comingsoon62.tsx instead.

Usage

The file also exports comingsoon62Demo, the exact props behind the preview above. Spread it to get a working section in one line, then replace it with your own data.

import { ComingSoon62, comingsoon62Demo } from "@/components/blocks/coming-soon/comingsoon62";

export default function Page() {
  return <ComingSoon62 {...comingsoon62Demo} />;
}

Props

PropTypeDefaultDescription
eyebrowstring"Coming soon"Small label above the heading.
headingstring"Enrollment opens soon"Course heading.
descriptionstring"Join the waitlist and we'll email you..."Supporting copy under the heading.
detailsCourseDetail[]noneLabel/value pairs shown in the details grid, e.g. start date, length, format.
lessonsstring[]noneLesson titles rendered as a numbered syllabus list.
classNamestringnoneExtra classes for the outer section element.

Types

interface CourseDetail {
  label: string;
  value: string;
}

Behavior notes

  • The email field and submit are real client state (useState): submitting swaps the form for a confirmation message, nothing is sent to a server.
  • The details grid and syllabus list are both fully static, no expand/collapse or reordering.
  • Lesson numbers are derived from array index at render time, not stored data.