shadcn.io is not affiliated with official shadcn/ui
Certification Passed Success Block for React Aria
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 React Aria. 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.