shadcn.io is not affiliated with official shadcn/ui
Product Certifications Storefront Block for React
A certificate register for a moisturiser: four made-up standards bodies with a status worked out from the valid-until date, a certificate number to copy, the scope of each mark and a Verify button that explains itself.
Installation
Overview
Back a product's claims with the paper behind them, with this certificate register for React with Base UI. A header says what Wrybill, a small skincare shop, sells. In a hairline frame with a plus mark on each corner, a heading row counts the certificates that are current, and four rows list each certification with its made-up standards body and a status written as a word with a dot: Current, Renewal due (within 60 days) or Expired, all worked out from the valid-until date against a fixed as-of date. One row is open at a time and shows what the mark covers, the certificate number with a Copy Button, the dates, and a Button to Verify that says why it does nothing in this demo. No certifier logos are used. It's built from Badge, Copy Button, Button and Guides, with a CSS entrance only. For a product page, a trust page or a supplier file.
FAQ
How do I use my own certificates?
Edit CERTIFICATIONS: a name, the body, the certificate number, a scope sentence and the last valid day as an ISO date. The status, the counts and the day counts are all derived from the date and AS_OF.
How is the status worked out?
The days from AS_OF to the valid-until date. Below zero is Expired, up to 60 is Renewal due and anything else is Current. The summary counts the current ones. To follow the real date, replace AS_OF with today's date on the server.
Why does Verify do nothing?
A real check needs the standards body's register. The button says what it would look up and where. Wire it to a link to the body's public register for that number.
What stays local, and how do I wire it to real data?
The bodies, numbers and dates are made up for the demo and nothing is sent. Use only real marks you are licensed to show, with the logo rules of each body, and keep the number and date next to them.