shadcn.io is not affiliated with official shadcn/ui
Certification Onboarding Block for React Aria
A certificate step drawn as a stair of three exams: choosing a step takes every step below it, a tab lists the path, and another asks a practice question that answers on the spot.
Installation
Overview
Show a learner how far a certificate goes before they commit, with this step for React with React Aria. It is a whole screen of Anvilhurst, a coding bootcamp platform: the page's rails and one band, a step header ("Step 4 of 6" and a hairline) and one framed panel. It opens with a stair of three native radio steps of rising height, Fundamentals, Advanced and Expert (on a phone, three rows each indented further than the last). Choosing a step takes every step below it too, and those say "Required first". Under the stair a Tabs pair: "Your path" lists the exams on the way with their questions, minutes and pass marks, and "Practice question" asks one question for the chosen exam that answers itself when you pick. One sentence says "Expert path: 3 exams, about 40 hours" and follows every pick. The certificates are course badges, and the page says that they are not an accreditation. Continue is the one Shine Button, with a quiet Skip for now.
FAQ
How do I change the exams?
Edit EXAMS, lowest first. Each has an id, a name, what it covers, its hours, questions, minutes, a pass mark and a practice question with its answers, the id of the one that is correct and a why sentence. The path is every exam up to the chosen one, and its hours are the sum; keep three so the stair keeps its shape.
How is the path worked out?
The chosen step and every step below it, by a small pure function: "Advanced path: 2 exams, about 24 hours. Fundamentals comes first." The steps below get a tint and "Required first"; the exams above are dimmed in the list and marked "not in this path" for a screen reader.
Does the practice question keep a score?
No. Picking an answer says at once whether it is right and why, in the panel and in the status line, and picking another answer says it again. Nothing is counted, saved or sent, and changing the certificate clears the answer.
Does this claim a real accreditation?
No. It is fictional course content and says so under the path: the certificates are course badges, not an accreditation or a professional credential. Keep a line like that, or replace it with your own true statement, when you use it.