shadcn.io is not affiliated with official shadcn/ui
Performance Log Changelog Block for Svelte
Five load metrics as rows sorted by improvement, each with the old reading struck through, the new one, the change as an arrow and a percentage, and paired bars, with a toggle that picks the release to compare against.
Installation
Overview
A performance log for Svelte with Ark UI, written for Speedledger, a fictional web-performance monitor. A start-aligned header carries a title worked out from the data ("Median improvement of 30%", the middle of the five changes) and a toggle group that picks which earlier release to compare the newest one against. Under it a band ruled from rail to rail that ends the block: one row per metric, sorted by improvement, with its name, the old reading struck through and the new one in a heavier weight, the change as an arrow, a sign and a percentage that rolls to the new value, and a pair of bars (the old reading an outline, the new one solid). It's built from Toggle Group, Sliding Number and Guides, with CSS transitions for the bars and your theme's tokens for every colour. For release notes, performance budgets and engineering updates. The readings are example data.
FAQ
How do I change the metrics and the releases?
Edit RELEASES (newest first, each with its day) and METRICS. A metric has one reading per release, in the same order, and lower is better. The change, the order of the rows, the median in the title and the bars are all worked out from those readings, so they cannot disagree. Add a release to the list and a button for it appears in the toggle.
How are the bars scaled?
Each pair is drawn to its own larger reading, so the longer bar always fills the row and the shorter one shows the ratio between the two. The bars are decoration; the readings and the change are always in text, and the legend says which bar is which.
What does the toggle do?
It chooses the release the newest one is compared against. The old readings, the bars and the percentages change, the percentages and the median roll to their new digits, and a polite line says what is showing. The rows are sorted by improvement against the chosen release, and the block's height never changes. The choice stays local to the page.
Is a better or worse change shown by colour?
No. The change is an arrow, a true minus or a plus and a number, and a screen reader hears it in words ("38% lower than v6.1"). The old reading is struck through and the new one is heavier, so before and after are told apart without colour.
How does it fit on a phone and in a right-to-left layout?
Below the tablet width each row stacks: the name and the change first, the readings under them, then the bars. Readings, arrows and signed changes keep their left-to-right order in a right-to-left layout, while the names and the text around them mirror.