shadcn.io is not affiliated with official shadcn/ui
Work Experience Timeline Block for React Aria
An employment record of four roles on a vertical rail, with dashed rows for the gaps between jobs, a note where two roles overlap, a verification state on each role and a Request verification button that records the request locally.
Installation
Overview
Check an employment history the way a verifier reads it with this work experience timeline for React with React Aria. It is written for Vouchwell, a fictional employment-verification service. A hairline frame with a plus mark on each corner holds one vertical rail with a lettermark Avatar for each of four invented employers, newest first. Each role shows its title, dates and length in months, and a verification line: verified by the employer with the day, requested with the day, or not requested. The gaps are derived from the typed months and drawn as dashed rows between the roles ("Gap: 5 months, Mar to Jul 2018"), and a role that runs inside another says so ("Overlaps Halsworth Cargo for 10 months"). A Button "Request verification" on a role that has not been asked records the request in this tab, changes the line to Requested with today's date and says in the status line that no email was sent. The button keeps its place afterwards, so nothing shifts. For hiring, background checks and any page where a history must be trusted. The employers and dates are example data.
FAQ
How do I change the roles?
Edit ROLES at the top of the file, oldest first. Each has an employer, a title, from and to months as "YYYY-MM", a current flag, and a check of none, requested or verified with the day it changed. The gaps, the overlaps, the lengths and the header counts are derived from those months.
How are gaps and overlaps found?
GAPS sweeps the roles in start order and keeps the latest month covered so far. A role that starts more than one month after that leaves a gap, and the months in between are counted and named. A role that starts before an earlier role has ended overlaps it, and overlapOf counts the shared months. Because the sweep uses the latest end, a short job inside a longer one never creates a false gap.
Does Request verification send anything?
No. It adds the role to local state, changes its line to Requested with the page's date and says "Request recorded in this demo. No email was sent." To wire it for real, call your verification endpoint from ask, wait for the response and only then change the state.
What stays in the page?
Only which roles you asked about. Reloading starts again. The button is hidden with invisible and inert once a request exists, so its place is kept and keyboard focus cannot land on it.