shadcn.io is not affiliated with official shadcn/ui
Release Support Lifecycle Table Block for Svelte
A table of a tool's versions with release date, install share bars, end-of-support date and a derived lifecycle word, a semantic-version sort and an I run select that says how far behind you are.
Installation
Overview
Say which versions are still safe to run, with this release support table for Svelte with Ark UI. Eight versions of a build tool called Hammerfell are listed with their release date, the share of installs still on each (a bar and a percentage worked out by largest remainder, so the shares always add to exactly 100), the date support ends and a lifecycle word in an outline Badge: Supported, Security fixes only or Ended, worked out from a fixed "as of" day. The Version head is a sort button that follows semantic versions, so 3.10 sits above 3.9 in either direction. An "I run" Select above the table picks your version: its row is marked "You run this" with a solid tint, and one line says how many versions behind it is and how long it is supported ("3.10 is 2 versions behind 3.12, security fixes only until 20 Jan 2027"). The rows are the same eight in either order, so the panel keeps its height. On a phone the Released column goes. For release schedules, runtimes, SDKs and any product with a support policy.
FAQ
How do I put in my own versions and policy?
Edit RELEASES: each version has its id, release date, install count, the date feature fixes stop (fixesUntil) and the date support ends (supportedUntil), as ISO dates. The lifecycle word is worked out by lifecycleOf from those two dates and the AS_OF day: before the first it is Supported, between them Security fixes only, after the second Ended. The percentages come from the install counts, so you never type them.
Why does 3.10 sort above 3.9?
Sorting as text would put 3.9 first because "9" is greater than "1". compareVersions splits each id on the dots and compares number by number, so 10 is greater than 9. The first press gives newest first, the second oldest first, and the head says which way with aria-sort and an arrow. Ids with a third part (3.10.2) work the same way.
What is largest remainder, and why use it?
Rounding each share on its own can make the column add up to 99 or 101. The helper takes the whole-number part of every share, counts how many points are left to reach 100, and gives one each to the shares with the biggest remainders, so the percentages always total exactly 100 and no row is off by more than a point. The bars use the same numbers as the text.
What stays local, and how do I make it live?
Everything is typed: no registry is checked and nothing is read from your machine. The "I run" choice is one useState value. To make it live, fill RELEASES from your release API and set the initial run from the version your app detects, such as one reported by the tool itself. Keep AS_OF as the server's current day so the lifecycle words are right for today.
Is it accessible?
Yes. It is a native table with a caption, column heads and a row header for each version. The sort head is a real button inside a th with aria-sort, and the arrow is decorative. The lifecycle is a word, never a colour alone, and the bar is hidden from assistive technology because the percentage is written next to it. One polite line, present from the start, reads the "I run" sentence and the sort order, and your row carries aria-current.
How does it look on a phone?
Released is dropped, the install bar gets shorter, and the dates and the badge keep their columns; the figure scrolls sideways inside its frame if a large text size needs more room. The "I run" control stays in its band above the table, and the status line has room for three lines so choosing a version never moves the table.