shadcn.io is not affiliated with official shadcn/ui
Compliance Badges Carousel Block for Vue
Seven invented assurance certificates drawn as seals on a hairline track sorted by renewal date, opening on the first one not yet renewed with the days left derived from a fixed date and a Next due button.
Installation
Overview
Keep renewals from sneaking up on a team, with this compliance badges carousel for Vue with Ark UI. Assuremoor, an assurance tracker, lists seven certificates (data handling, supplier risk, incident readiness, access control, encryption, continuity and privacy by design), each drawn as a seal in your theme's foreground weights, with the body that issued it, its scope and its renewal date. The schemes and bodies are invented. They are sorted by renewal date, and the track opens on the first one not yet renewed: the earlier ones read Renewed with a check and sit before it, and the open one is flagged Next due with "Due in 41 days" counted from one fixed date. A toolbar band says "3 renewed, 4 to renew", and the foot holds the counter, a "Next due" Button that comes back to it, and Previous and Next. Two certificates show from the medium breakpoint, one with the next peeking on a phone. The ruled bands come from Guides. It's built from Carousel, Badge, Button and Guides, with CSS transitions only. The certificates, bodies and dates are made up for the example.
FAQ
How do I use my own certificates?
Edit CERTIFICATES, sorted by due: an id, a name, an issuer, a scope, an ISO due date, a renewed date (empty while it is still to do), and a seal and mark that pick its drawing. The track opens on the first entry with no renewed date (START); the status words and the days left come from AS_OF and the dates, with whole-day arithmetic in UTC, so a late certificate says "Overdue by 3 days".
How does the track open on the next one due?
The page starts at START instead of zero, and "Next due" goes back to it from anywhere.
The page is the Carousel's controlled page, which starts on START.
How does it work with a keyboard?
Tab reaches Next due, Previous and Next. With focus in the track, the arrow keys move it by one certificate (mirrored in a right-to-left layout) and Home and End jump to the first and last. The buttons stay in the tab order and are marked unavailable instead of disabled when they have nothing to do. Certificates out of view are hidden from the tab order and from screen readers.