shadcn.io is not affiliated with official shadcn/ui
Horizontal Cards Timeline Block for Vue
The six visits of a clinical study as cards hanging below one rail, each with its date, three things that happen and a fasting note, the next visit counted in days from today, and a button that saves the next visit as a real calendar file.
Installation
Overview
Give a participant their whole schedule and a way to take it with them, with this horizontal cards timeline for Vue with Ark UI. It is written for Visitline, a fictional clinical study participant app. A hairline frame with a plus mark on each corner holds six visits, Screening, Baseline, Week 2, Week 4, Week 8 and Follow-up, as cards that hang below one rail. Each card gives the date, three things that happen and a fasting note; visits already done are solid, the next one carries a badge saying how many days away it is, counted from 14 Oct, and the later ones are dashed. "Add next visit to my calendar" saves a real .ics file with the next visit's date and time, which any calendar app can open. From the large breakpoint the rail runs across the panel; on a phone it becomes a vertical rail at the start with the cards stacked on it. It is built from Button, Badge and Guides, with an entrance only. For study visits, onboarding schedules, courses and any sequence the person has to attend. The schedule is example data.
FAQ
How do I change the visits?
Edit VISITS. Each has an id, a title, an ISO date, three things and a fasting note. Which visits are done, which one is next and the day counts all come from AS_OF, so the badge and the counts update without further edits.
What is in the calendar file?
One event for the next visit: the title, the date at 08:30 to 09:30 as a floating local time, and a description with the fasting note and the three things. It is built in the browser when you press the button, so no server is involved, and the lines end in CRLF as the format requires.
What stays in the page, and how do I wire a real schedule?
The only real action is the file download. Nothing else is saved or sent, and the visit data is typed. For a real study, load the visits from your participant record and generate the file for the visit the person chooses.
Is it accessible, and does it work in a right-to-left page?
The visits are an ordered list with a heading each and the next one is marked aria-current="step"; done, next and later are told apart by a word and a line style, not colour. A polite status line says that the file was saved. The horizontal rail does not mirror in Arabic or Hebrew, while the vertical rail on a phone follows the page direction.