shadcn.io is not affiliated with official shadcn/ui
Linked Issues Changelog Block for Svelte
Two releases as cells that overshoot their lines, each change ending with an issue chip that opens a card with the issue's title, state and assignee, and a foot that counts the issues each release closes.
Installation
Overview
A changelog for Svelte with Ark UI, written for Ticketthread, a fictional issue tracker. A start-aligned header sits over two release cells whose rules and plus marks run a little past their corners, side by side on a wide screen and in one column on a phone. Each cell has the version in mono, the day and the type tags, a title and a list of changes. Every change ends with its issue as a mono chip with an external-link arrow, a link to the tracker. Pointing at a chip, or focusing it, opens a card with the issue's title, its state (an icon and a word) and its assignee, and the same facts are in the link's name for anyone who never sees the card. A line at the foot of each cell says what it closes, counted from the issues' own states. It's built from Hover Card, Avatar, Badge and Guides, with CSS transitions for the entrance and your theme's tokens for every colour. For issue trackers, project tools and engineering teams that tie every change to a ticket. The releases, issues and names are example data.
FAQ
How do I change the releases and the issues?
Edit RELEASES at the top of the file. A release has a version, an ISO date, its type tags, a title and changes; a change is a sentence and its issue, which has an id, a title, a state and an assignee. A state is one of two constants, Closed or Open. Dates are fixed, never computed from today.
How is the count at the foot worked out?
From the data. A release closes the changes whose issue is Closed; an Open known issue is listed in the cell but not counted. The line reads "Closes 1 issue" in the singular, so editing the list keeps it true.
Where do the chips link to?
They are links with href="#": point each at your tracker's address for that issue. The arrow beside the id is decoration, and the link's name is the id, the issue's title, its state and its assignee.
How does the card open, and what about keyboards, screen readers and touch?
It opens when you point at a chip. The card is extra: the link's own name already holds the title, the state and the assignee, so a screen reader hears the facts without it, and on a touch screen the chip simply follows its link.
The trigger takes asChild around the link, and the card also opens when the link takes keyboard focus.