shadcn.io is not affiliated with official shadcn/ui
Developer Experience Scorecard Changelog Block for Svelte
A framed scorecard table of four build steps with six thin columns for the last six releases, the value now and the change as an arrow and a sign, with a toggle that orders the rows.
Installation
Overview
A developer-experience scorecard for Svelte with Ark UI, written for Smoothrun, a fictional build tool. A start-aligned header carries a title worked out from the data (how many of four steps got faster in the latest release) and a toggle that orders the rows as listed or with the best change first. Under it a framed table has a row for each step (build time, hot reload, test run, install): six thin columns for the last six releases, newest first with the latest in solid foreground, the value now and the change since the release before as an arrow, a sign and a percentage. Every step says lower is better. It's built from Toggle Group, a native table and Guides, with CSS transitions and your theme's tokens for every colour. For build-tool changelogs, engineering reviews and release notes with numbers. The figures are example data.
FAQ
How do I change the steps and the releases?
Edit STEPS and the release names at the top of the file. A step has a label, a unit and six values, newest first, where lower is better. The columns' heights, the value now, the change since the release before and the title are all worked out from the six numbers. Heights are a share of the row's slowest release, with a small floor so a column never vanishes.
What does the toggle do?
As listed keeps the order in the file; Best change first puts the biggest improvement on top. The rows all have one height, so reordering never moves the page. The choice stays local to the block.
How is a change told without colour?
By an arrow, a sign and words for assistive technology: a step that got faster shows a down arrow and a true minus, a slower one an up arrow and a plus, and one that did not change a dash and 0%. The latest release is the solid column and the other five are a paler solid, so weight carries the order.
How does a screen reader get the columns?
The columns are hidden from assistive technology. Each row's cell also holds the six values in a sentence, newest first, with their unit, and the table has a caption and header cells.
How does it fit on a phone and in a right-to-left layout?
Below the desktop width the table scrolls sideways if it must, the six columns stay, and the change column drops (the title still says how many steps improved). The columns always run left to right, newest first. In a right-to-left layout the text and rows mirror, while versions, dates, percentages and signed changes, which are data, keep their order.