shadcn.io is not affiliated with official shadcn/ui
Compact Timeline Changelog Block for Svelte
The last three weeks of a time-tracking app on one thin rail: six releases of two small lines each, with the dot's shape (circle, diamond, square, ring) telling the kind and a one-line key.
Installation
Overview
A compact release rail for Svelte with Ark UI, written for Slimline, a fictional time-tracking app. A start-aligned header and a one-line key sit over a thin rail with no bands and no cards: six releases of two small lines each, the version and the day in mono and then what changed, grouped under quiet week labels that tick against the rail. The shape of each dot is the kind of change (a circle for New, a diamond for Improved, a square for Fixed, a ring for Deprecated), the key names the four shapes, and every row also says its kind in text for assistive technology. The rail fades out at its foot and "View all releases" follows. The page's rails and top rule come from the Guides spine; the thin rail is the only other line. It's built from Guides and Button, with CSS transitions for the entrance and your theme's tokens for every colour. For changelogs that need the most releases in the least height. The releases are example data.
FAQ
How do I change the releases and the weeks?
Edit WEEKS at the top of the file: each week has a title ("Week of Mar 23") and its releases, each with a version, a date as an ISO day, a kind and a text. The week labels are plain text you write, so check them against the dates. Dates are fixed and spelled out by a small helper, so they read the same on the server and in every browser.
How are the kinds told apart?
By the dot's shape, never by colour: the constants NEW, IMPROVED, FIXED and DEPRECATED each carry a shape (the classes that draw it), and the key above the list is built from the same constants. Each row also puts its kind in text a screen reader reads first ("Fixed: Timers started offline sync once you reconnect"), so the shape is never the only signal.
How is the rail built?
One CSS variable, --rail, sets its distance from the column's start edge; the line, the dots and the week ticks all read it, so moving the rail is one number. The line is a pseudo-element on the list and fades out over its last 3rem.
Where does View all releases go?
It's a link (href="#"): point it at your full changelog. It's a ghost button, so the block has no primary action.
The button's asChild receives its props: spread them onto your router's link.
How does it fit on a phone and in a right-to-left layout?
The layout is the same at every width: the rail stays at the start edge and the text wraps beside it, so nothing scrolls sideways at 320 pixels. In a right-to-left layout the rail, the dots and the week ticks move to the start edge, the arrow turns, and the mono versions stay in reading order.