Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Onboarding blocks

Pro

Certification Onboarding Block for Vue

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.

Framework
UI library

Preview

Preview width

Installation

Part of Pro
Pro unlocks the code and one-line install of every Pro button and text effect, plus the MCP for your AI editor.
Get ProSign in
Have Pro already? Sign in to open it.Opens here as soon as you're Pro.

Overview

Show a learner how far a certificate goes before they commit, with this step for Vue with Ark UI. 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.

What if Continue is pressed with nothing chosen?

Continue stays in the tab order and looks quiet. Pressing it says "Pick a certificate to continue." under the stair and puts focus on the first step. Both tabs hold one height, so switching between them moves nothing.

What stays local in the demo, and how do I wire it?

Everything: Continue says it saved in this demo and enrols nobody. In your app send the chosen exam id to your server where submit says so, and enrol the learner in the exams on its path.

All 100 onboarding blocks