shadcn.io is not affiliated with official shadcn/ui
Bundle Size Changelog Block for React
Five releases as stacked horizontal bars split into four chunks, told apart by weight and pattern, with a budget tick, each release's total and change, and a toggle that rolls the sizes between gzip, brotli and raw.
Installation
Overview
A bundle-size changelog for React with Base UI, written for Byteweigh, a fictional bundle analyser. A framed band draws one stacked horizontal bar for each of five releases, split into four chunks (core, vendor, routes, styles) told apart by weight and pattern, not colour, with a key above the rows. A tick on every bar marks the 120 kB gzip budget. Beside each bar sit the release's total in kilobytes and how much it moved since the release before (an arrow, a sign and a number); the one release over budget says so in words. A toggle at the header's end switches between gzip, brotli and raw, and the totals roll to the new sizes with the Sliding Number component while the bars keep their shape (in this demo brotli and raw are fixed ratios of gzip). The sizes also sit in an unseen table for screen readers. On a phone each row's sizes drop under its bar. It's built from Sliding Number, Toggle Group, Badge and Guides, with CSS transitions for the entrance and your theme's tokens for every colour. For bundle reports, performance budgets and release notes that track weight. The releases and sizes are example data.
FAQ
How do I change the releases and the budget?
Edit RELEASES at the top of the file. A release has a version, an ISO date and its four gzip sizes in kilobytes, in the order of CHUNKS; the budget is BUDGET (in gzip kilobytes). The totals, the changes since the last release, the bar widths, the budget tick and the headline ("v3.8.0 is 12.6 kB lighter than v3.6.0") are computed from those numbers. Brotli and raw are fixed ratios in factorOf: replace them with real measurements if you have them.
How are the chunks told apart without colour?
By weight and pattern: core is solid, vendor a lighter solid, routes hatched and styles pale, each with a key above the rows. Every size is also text, in the unseen table and beside each bar as a total.
What does the format toggle do?
It switches the sizes between gzip, brotli and raw: each total rolls to its new digits, the delta under it is recomputed in that format and the budget label changes with it ("Budget 105.6 kB" for brotli). The bars keep their shape, the block keeps its height and the unseen table updates too, so screen readers hear the same numbers. It only changes local state.
How is the budget shown?
As a tick on every bar, a mark in the key and a word on the one release that crosses it: a warning icon and "Over budget". The tick sits at 80% of the bar so a release a little over still has room to show it.
Related
- Pro
Dependency Updates Changelog
Packages and versionsA table of eight dependency updates in two groups, Production and Dev: package, old and new version, the kind of bump and a three-pip risk, with sortable heads that reorder the rows inside each group.
- Pro
Dependency Graph Changelog
Packages and versionsAn app's dependency tree with a three-way filter (All, Outdated, Vulnerable): each row shows a package, the version it has and the one it could have, an Update available badge or a vulnerability count, and a band of three counts sits above.
- Pro
API Response Time Changelog
Metrics and chartsPaired bars for five endpoints on a shared 0 to 400 ms axis, the previous release pale and this one solid, with the change in rolling percent digits, the optimisation behind it and a p50, p95 or p99 toggle that redraws the bars.
- Pro
Segmented Bar Latency Budget
Metrics and chartsA single bar that slices a 250 ms request budget by hop (edge, auth, database, render), a switch between two releases that re-slices it, and a four-cell band with each hop's milliseconds and its change.
- Pro
Lighthouse Scores Changelog
Metrics and chartsFour audit score rings on shared hairlines with the change since the last release, the three Core Web Vitals as a list of terms, and an accordion of the audits still failing.
- Pro
Performance Log Changelog
Metrics and chartsFive 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.