shadcn.io is not affiliated with official shadcn/ui
Certificate Awards Block for React Aria
A 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.
Installation
Overview
A certificate of award for React with React Aria. A centred header, then a framed figure holding the certificate: a double hairline frame, a drawn laurel, "Certificate of award", the recipient, a citation, two signature strokes with their names and titles round a small scalloped seal, and the certificate's number. Beside it a details list gives the number, the day issued, the last day and its standing, which is worked out from a fixed day, with an outline "Verify this certificate" link under it. The certificate is real text that reflows on a phone, so nothing is cropped; only the laurel, the frames, the seal and the strokes are drawings. The page's rails and top rule come from the Guides spine. The Copperford Prize, the people and the number are made up: replace them with your own award.
FAQ
How do I change the certificate?
Edit CERTIFICATE at the top of the file (recipient, title, programme, year, citation, number and the two days) and the two signers, CHAIR and DIRECTOR, whose strokes are one path each in a 96 by 24 box. The details list reads the same object, so the certificate and the list never disagree.
How is the status worked out?
AS_OF is a fixed day the block is read as of. The status is Valid when the last day is on or after it and Expired otherwise, with the whole years to go beside it. Nothing reads the clock at render, so the server and the browser always agree; set AS_OF yourself to keep it current.
Where does the Verify link go?
It is a link to # in the example. Point it at your own verification page, for example one that takes the certificate number; the Verification Lookup block in this category is a page that does that.
Are the signatures real?
No. Each is a stroked path, a flourish rather than a name, and the name and title are text under it. Do not draw a real person's signature without their permission; in a real certificate you would use an image the signer has approved.
How do screen readers read it?
The certificate is a figure whose caption (hidden visually) gives the number, the title and the programme. The heading, recipient, citation, names, titles and number are text; the laurel, frames, seal and strokes are hidden from assistive technology. The details are a description list with real time elements.