shadcn.io is not affiliated with official shadcn/ui
Dashed Line Timeline Block for Svelte
Seven crew bookings for a shoot week on a rail where a solid line is confirmed and a dashed line is a hold, with Confirm and Release on every hold and the counts in the header updating in place.
Installation
Overview
Let the way a line is drawn say whether it is firm with this dashed-line timeline for Svelte with Ark UI. It is written for Crewhold, a fictional crew-booking tool. A hairline frame with a plus mark on each corner holds seven bookings for one film-shoot week on a vertical rail. A confirmed booking has a solid dot and a solid line under it. A hold has a dashed dot, a dashed line and the words "On hold until Sat 17 Oct, in 3 days", counted from one fixed date. Every hold carries two outline buttons, Confirm and Release, named for the person and the role. Pressing one redraws the dot and the line in place, updates the header ("4 confirmed, 3 on hold"), keeps the keyboard on the row and puts one sentence in the foot with an Undo. Rows keep one height, so nothing moves. It is built from Guides, Button and Badge with CSS for the rail. For crew, hiring, venues, rooms and any list where some entries are only pencilled in. The bookings are example data.
FAQ
How do I change the bookings?
Edit BOOKINGS at the top of the file. Each has an id, a role, a person, the ISO day on it is needed, how it starts ("confirmed" or "hold") and, for a hold, the day it lapses in until. The header counts and the "in 3 days" text are derived from the list and from AS_OF, the one fixed date the block counts from. Replace AS_OF with today's date in your app.
How is the line drawn dashed or solid?
Each row draws the half of the line above its dot and the half below it. A half is solid when the booking at its upper end is confirmed and dashed otherwise, so the segment between two people always follows the earlier one. The dot follows the same rule: solid when confirmed, dashed and hollow for a hold, a plain hollow ring for a released one. Words and a Badge say the same thing, so the state never depends on how a line looks.
What stays in the page?
Confirm, Release and Undo change local state only, and the foot says "Nothing was sent". To make it real, call your booking API from confirm and release, show the row as pending while it runs, and only then redraw the line.
Why do the rows not change height?
The buttons are always laid out. Once a booking is no longer a hold, they are hidden and removed from the tab order rather than taken out of the row, and the state line reserves two lines on a phone. The panel is the same height before and after.
Is it accessible?
Each button says what it does to whom ("Confirm Bram Okereke as Focus puller"). After a press, focus moves to the row so the keyboard keeps its place, and a polite status line in the foot announces what happened and that Undo is available. The dots and lines are decoration; the state is also written in words in each row.