Enrollment Pricing

Cohort or self-paced. Seats left.

Every pricing component assumes SaaS tiers: three columns, monthly or annual, a highlighted middle card. Education pricing does not work like that. A course is cohort or self-paced, paid in full or in installments, with a start date, a deadline, and a number of seats. If you have built a course page, you have rebuilt that block by hand. This is that block as one component. WHAT IT IS Two toggles above a row of plan cards. Format: Cohort or Self-paced. Billing: Pay in full or Payment plan. Every plan carries up to four prices, typed as plain text in the properties panel ("$1,200", "$420"). Leave one empty and that card shows "Not offered" for that combination, without changing height. WHAT THE CARDS SHOW — The active price, cross-fading when you switch — Payment plans as "3 × $420" with a note like "billed monthly" — A start date and a closing note — Seats left as a badge: amber when you're down to the last few, "Sold out" at zero with the button disabled — A feature list, a "Most popular" highlight, and a CTA per plan WHAT IT DOES NOT DO No countdown timer, no live seat counter. Dates and seats are numbers you type, so nothing ticks, nothing expires, and nothing breaks on the canvas. Want a live countdown? Pair it with a countdown bar above. WHAT YOU GET — Hide either toggle if you sell only one format or one billing option; an option with no prices behind it disables itself — Cards never change height when you switch — Light and dark themes, one accent color, adjustable max width — Accessible: real toggle buttons with aria-pressed, badge text that never relies on color alone — Zero external libraries. Pure React and CSS. Everything is configured from the properties panel. No CMS, no code.

Cohort or self-paced. Seats left.