shadcn.io is not affiliated with official shadcn/ui
Left Aligned Timeline Block for Svelte
A support desk handover log with a clock column at the start, a rail and the entries, where a Show times in select re-derives every clock for UTC, Berlin, Singapore or Sao Paulo and moves entries that cross midnight under the next day.
Installation
Overview
Show a log in the reader's own time zone with this start-aligned timeline for Svelte with Ark UI. It is written for Shiftbridge, a fictional follow-the-sun support rota. A hairline frame with a plus mark on each corner holds a band that names the zone in use and a log of nine entries from one day: handover notes, escalations, tickets moved and an empty queue. Each entry has its clock in a monospaced column at the start, then the rail, then the title, one line of detail, a Badge with an icon and the kind in words, and the person's initials in an Avatar. The shape of each node tells the kind: a diamond for a handover, a ringed dot for an escalation, a plain dot for a ticket moved and a hollow dashed dot for an empty queue. A Native Select in the header, "Show times in", offers UTC, Berlin (UTC+2), Singapore (UTC+8) and São Paulo (UTC-3): every clock is derived again from a fixed offset typed in the data, and an entry that crosses midnight moves under a new day head and says "+1 day". The panel keeps the same height in every zone. It is built from Native Select, Badge, Avatar and Guides, with a CSS entrance only. For support rotas, on-call handovers and any log read across time zones. The entries are example data.
FAQ
How do I change the entries?
Edit ENTRIES at the top of the file. Each entry has an id, a UTC time at as an ISO string, an author, a title, a note and a kind, which is one of four constants (HANDOVER, ESCALATION, MOVED, EMPTY) that pair a node style, an icon and a word. Set LOG_DAY to the day the log is for; the day heads and the "+1 day" words are worked out against it.
How are the zones handled without a time library?
Each zone in ZONES has a fixed offset in minutes east of UTC, and shownAt() adds it to the entry's time and reads the clock from the result. There is no daylight saving and no locale formatting, so the server and every browser write the same text. If your desk needs real zones, replace shownAt() with a function that returns the local ISO string for an IANA zone, and keep the rest.
What happens to an entry that crosses midnight?
It moves under the next day's head and shows "+1 day" under its clock. The band above the log counts how many entries fell on the next day in the zone you picked, so Singapore shows three and UTC shows none. The space for that word is always reserved, so rows never shift.
What stays in the page?
Only the chosen zone, held in local state. Nothing is saved or sent. To remember the choice, store the zone id with the user's profile and read it into the initial state.
Is it accessible?
The log is an ordered list with a heading per entry and per day. Each clock is a time element with its ISO value, and the kind is always written as a word next to its icon. The select is a native one with a visible label. The status line above the log is a polite live region that is there from load, so a screen reader hears the zone and the count when the choice changes.