shadcn.io is not affiliated with official shadcn/ui
Certification Path Timeline Block for React Aria
Six safety credentials on a vertical rail that re-order between By date earned and By expiry, with expiry counted from a fixed date in words and glyphs (Expires in 62 days: renew soon, Expired 224 days ago) and one exam booked for a later Friday.
Installation
Overview
See which qualifications are due, not just which were earned, with this certification path timeline for React with React Aria. It is written for Renewly, a fictional compliance-training service. A hairline frame with a plus mark on each corner holds a choice, "Order the rail", and a vertical rail of six credentials. Five are earned, drawn with a solid node, an issuer and a credential id in mono; one is in progress, drawn with a dashed node and "Exam booked Fri 20 Nov". Choosing By date earned or By expiry re-orders the same six rows, and By expiry puts what is due first. Every expiry is counted from one fixed date in the file and written in words with a glyph, never only a colour: "Expires in 62 days: renew soon", "Expired 224 days ago", "Expires in 99 days". The header counts how many are valid, due within 90 days and expired. The panel keeps its height for both orders. For compliance dashboards, training records and renewal reminders. The issuers, ids and dates are example data.
FAQ
How do I change the credentials?
Edit CREDENTIALS at the top of the file. Each has a name, an issuer, a ref, the day earned as an ISO date and the years it stays valid, or an exam day while it is in progress. The expiry day, the days left, the state and the header counts are derived from those.
How is the expiry counted?
dayNumber turns an ISO day into whole days since 1970, and the days left are the expiry day minus AS_OF. A credential with 90 days or fewer left is "renew soon" (SOON), and a negative number is expired. The page never reads the clock, so the server and every browser write the same words and the example stays true.
How does the order change?
sortedOf returns the same six rows in a new order: newest earned first for date earned, with the booked exam on top, or soonest expiry first for By expiry, with the unearned credential last. The rows keep their keys, so the list is the same elements in a new order.
What stays in the page, and how do I wire reminders?
The chosen order is local state. Nothing is sent. To remind people for real, run the same days-left rule on your server and send the reminder there; the page only shows the state.
Is it accessible?
The rail is an ordered list with a heading per credential. State is a word and a glyph: a cross for expired, a warning triangle for due soon, a check for valid, a dashed circle for in progress. The order choice is a group of native radio buttons. The status line is a polite live region that names the order and the next credential due.