shadcn.io is not affiliated with official shadcn/ui
Payment Schedule Course Contact Block for React
A course enrolment on shared hairlines: three programmes as choice cards, a plan switch that rewrites a payment schedule table to the cent, and a form that checks itself and confirms in place.
Installation
Overview
A course enrolment section for React with Base UI, drawn as cells that share their hairlines under a start-aligned header and a short list of promises. At the start, one tall cell holds three programmes as choice cards (the weeks in large type, the name, a line on what you leave with and the price); at the end, a cell with a Segment Group (pay in full, three or six instalments) over a schedule table, then a cell with the enrolment form (name, email and a class time). Choosing a programme or a plan works the table out again: a due month and an amount on every row, a total that adds up to the cent (leftover cents go to the first payments), and a line that says what paying in full saves. Submitting checks every field, shows each problem under its field and moves focus to the first one; a valid request turns into a confirmation in the same cell, which takes focus and repeats the programme, the class time and the first payment while the schedule stays in view. The rails and top rule come from the Guides spine, so the block lines up with its neighbours in a stack. It's built from Radio Group, Segment Group, Select, Field, Input, Guides, Shine Button and Button, with CSS transitions for the entrance and your theme's tokens for every colour. For adult schools, evening classes, bootcamps and any course that sells by instalment.
FAQ
Where does the form send its data?
Nowhere yet. The submit handler waits 800 milliseconds, as a stand-in for a request, then shows the confirmation. Replace that timer in submit with a call to your registrar's inbox or enrolment system: details holds the name, email and class time, and programmeId and planId hold the choices. Nothing is charged: the block never asks for a card.
Where do the programmes, prices and the discount come from?
They are fixed example data at the top of the file: PROGRAMMES (name, weeks, whole-dollar price and a line of copy), PLANS (how many payments) and FULL_DISCOUNT (the percentage off for paying in full). The block says "Example figures only, not advice" under the table. Prices are in cents inside the maths, so the schedule never shows a rounding error.
How does the schedule add up to the total?
splitOf gives every payment the rounded-down share of the total and hands the leftover cents, one each, to the first payments. A 890 dollar programme in three instalments reads 296.67, 296.67 and 296.66, which adds up to exactly 890.00. The total row repeats the sum, and amounts are wrapped so a right-to-left page keeps each figure whole.
Does the page jump when I pick a plan with fewer payments?
No. The table sits in one grid cell with an unseen copy of the longest schedule (six instalments), so the cell keeps the same height whichever plan is chosen, and so does the block. The unseen copy is hidden from assistive technology and can't take focus. A polite status line announces the first payment and the total whenever the programme or the plan changes.
How are the programme cards and the plan switch built?
The cards are one Radio Group: each card is a label around a field with the radio, so the whole card is the target, and the chosen card is marked by a foreground ring and a tint, never the primary colour. The arrow keys move between cards.
Each radio takes an id and its label points to it with htmlFor; the group's change handler receives the value directly.
How does it fit on a phone?
The cells stack in the order programmes, plan and schedule, then the form and the contact details, so the three programmes and the schedule come before the form. The cards drop their description line, the plan labels wrap to two lines inside their segments, and the submit button goes full width; nothing scrolls sideways at 320 pixels. The header fades up once on load; with reduced motion it simply appears.
Related
- Pro
Eligibility Checklist Scholarship Contact
ApplicationsA scholarship application on a card in card: four eligibility criteria as ruled checkbox rows with a verdict line, an essay with a word count that fills a bar toward its minimum, and a form that checks itself and confirms in place.
- Pro
Enrolment Steps Contact
ApplicationsAn enrolment request for a day school in four steps: the student, the programme, the parent and a review where every answer has an Edit button.
- Pro
Loan Payment Slider Contact
Finance and propertyA personal-loan request for a lender: an amount slider with a tick at each $5,000 and a term to pick, a panel that works the monthly payment out as you move, and a form that checks itself.
- Pro
Guest Count Ruler Contact
Events and datesAn event-catering request for a caterer: a guest-count slider drawn as a ruler beside the cost per head and the total, then a three-course menu, dietary needs and a short form on ruled bands.
- Pro
Talk to Sales Contact
Contact formsA talk-to-sales split for a scheduling platform: what happens next as three numbered steps and a band of contact details beside a form that checks itself, shows each problem under its field and confirms in place.
- Pro
Animal Cards Adoption Contact
ApplicationsAn adoption application that starts with four animal cells on shared hairlines and a slider for the hours a home is empty, with a list of the animals that suit you narrowing beside the form.