shadcn.io is not affiliated with official shadcn/ui
Certification Passed Success Block for React
A page for a passed certification exam: a drawn certificate sheet with a Passed stamp that lands once, the 98% score in a ring, a button that copies the verification link and one that downloads a text record of the credential.
Installation
Overview
Hand over the credential the moment it is earned with this confirmation page for React with Base UI. It is the page Elmreach Academy, a school of cloud architecture courses, shows when a learner passes an exam: the page's side rails and one band frame it, and the credential is the centre. A greyscale certificate sheet is drawn inside a frame with the issuer, the holder's name in a serif, the programme, the date, the credential id, a ring seal and a signature, and a Stamp Text "Passed" lands on it once. The sheet scales down by its container on a phone. A small Circular Progress ring gives the 98% score against the pass mark. The Shine Button opens the learner's credentials, a Copy Button copies the verification link and a Download Trigger saves a text record. For courses, exams and professional certification.
FAQ
What stays in the page, and how do I wire it for real?
Nothing was issued. The learner, programme, date, score, id and link are typed constants, and the verification link opens nothing. The copy really writes the link to the clipboard, and the download really saves a small text record named as a sample. To wire it, issue the credential on your server, fill the constants from it, point the link at your verification page, and return your real file from the download.
What happens to the stamp with reduced motion?
It is simply there. Otherwise the word lands once, a letter at a time, when the page opens, and stays. It never loops, and the word is also in the page's text for a screen reader.
What do the buttons say when pressed?
The page has one live line under them. It starts with a note that this is a sample credential, then says the link was copied or which file was downloaded. A refused copy leaves the line as it was.
How does it look on a phone?
The certificate comes first under the heading and scales down inside its own width, with the stamp over its corner, then the score ring, the primary full width, and the copy and download buttons in two columns.
Related
- Pro
Certificate Validity Chain Success
Domains and networkA confirmation panel for an issued TLS certificate: three dates on shared hairlines, a validity bar from issue to expiry with a hatched renewal window and a marker the visitor moves along it, and the certificate chain as nested lists with a copy button for each fingerprint.
- Pro
Certification Onboarding
Milestones and recapsA 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.
- Pro
Certificate Awards
One featured awardA formal certificate of award as HTML with a double hairline frame, a drawn laurel, the recipient, a citation, two signature strokes and a seal, beside a details list and an outline Verify link.
- Pro
Audit Scorecard Success
Saves and updatesA confirmation page for a finished control review: a ring of the checks that passed worked out from six control families, each family as a row of cells (filled for a pass, hollow for a check that did not), a short list of findings and dates, and a real one-page PDF summary to download.
- Pro
A page for a freelancer profile that reached 100%: a progress ring around an initials avatar, a Verified badge, six ticked profile sections with a detail each, and profile views before and since.
- Pro
Client Certificates Account
Sign-in methodsThe certificates that sign an account in on a device: ruled rows with the issuer, the end date and days to go, a details row with serial number and fingerprint, Renew, Revoke and an add dialog.