shadcn.io is not affiliated with official shadcn/ui
Stacked Badges Timeline Block for Solid
Six weeks of an open-source maintainer's work on a vertical rail, one node per week with Commits, Reviews and Issues pills; pressing a pill opens that week's latest items, one at a time, at a constant height.
Installation
Overview
Summarise a week in three pills and open the detail only when it is wanted with this stacked badges timeline for Solid with Ark UI. It is written for Maintaindesk, a fictional desk for open-source maintainers. A hairline frame with a plus mark on each corner holds a vertical rail with one node for each of the last six weeks, newest first, and the newest has the ringed "now" node. Each node carries a stack of outline Badge pills with an icon and a count: Commits, Reviews and Issues. Press a pill and the latest items of that kind open under the node with a short id and a title; press it again to fold them, or press another pill and that one takes over, so only one is open at a time. The sentence in the header adds the weeks up from the counts ("Last 6 weeks: 41 commits, 19 reviews, 12 issues"). An unseen copy of the fullest state sits under the live rail, so the panel keeps its height whichever pill is open. For maintainer desks, weekly reports and any record that has a few kinds of work per period. The figures are example data.
FAQ
How do I change the weeks?
Edit WEEKS at the top of the file, newest first. Each week has an id, the Monday it starts on (from), a count for each kind and a short list of its latest items for each kind. The header totals and the "Latest 3 of 10" line are derived from the counts, so only the items are typed separately: list up to three per kind.
How does opening a pill work?
The page keeps one key, the week and the kind, in state. A pill is a real button with aria-expanded that is true for that key, and its items sit in a panel that is closed with a smooth height change and hidden from the keyboard and screen readers when it is folded. Reduced motion removes the animation.
Why does the panel never change height?
A second, invisible copy of the rail with the fullest state open sits in the same grid cell as the live one, so the cell is always as tall as the tallest case. Every list is limited to three one-line items for the same reason. If you allow more items, raise the limit in the copy as well.
What stays in the page, and how do I use real data?
Everything: the open pill is local state and no request is made. To use real work, count your commits, reviews and issues per week on the server, send the latest three of each kind with the counts and keep the pills and panels here.
Is it accessible?
The weeks are an ordered list and each pill is a button named by its kind and count, with aria-expanded and aria-controls. Counts are numbers and words, never colour alone; the open pill is filled with the foreground colour. The status line is a polite live region present from load that says what is showing.