shadcn.io is not affiliated with official shadcn/ui
Impact Badges Changelog Block for React Aria
Seven fixes with an impact meter of one to four rising bars and a word, a band that counts each level, and a Sort by Select that reorders the rows by impact or by date.
Installation
Overview
An impact changelog for React with React Aria, written for Heftmark, a fictional QA tracker. A header with a Sort by Select at its end sits over a band of four cells that count the fixes at each level (Critical, High, Medium, Low), then seven ruled rows rail to rail. Impact is drawn and written, never a colour: a small meter of one to four rising bars, the lit bars being the level, beside the word. Each row has a title, a sentence, the version and the day it shipped. Choosing Impact or Date reorders the same seven rows, so the block's height never changes, and a polite line says how they are ordered. It's built from Guides and Select, with CSS transitions for the entrance and your theme's tokens for every colour. For bug trackers, release notes that rank their fixes and any changelog that wants the worst news first. The fixes are example data.
FAQ
How do I change the impact levels?
Each level is a small object at the top of the file: an id, a label and lit, the number of bars that are filled (one to four). Give a change one of them as its impact. The four counts in the band are computed from the list, so they always match the rows.
Why isn't impact a colour?
Colour alone fails for anyone who can't tell the hues apart, and in a greyscale or high-contrast theme nothing would be left. The meter's bars are decoration (hidden from assistive technology); the word beside them, with a visually hidden "Impact:" in front, carries the meaning.
How does the sort work?
The Select holds two orders. Impact lists the highest level first and, within a level, the newest first; Date lists the newest first. Both are computed once from the typed list, and a polite status line reads the new order out. The rows are the same seven, so sorting never changes the block's height.
Is the Select the same on every base?
It looks and behaves the same, but each base wires it with its own props: a collection on Ark UI, items on Base UI, plain values on Radix and keys on React Aria. The chosen value is announced by the select itself and by the status line.
How does it fit on a phone and in a right-to-left layout?
On a phone the Select sits under the header, the four counts stay in one row with their meters above their labels, and each row puts its meter above the title and its version and day under the sentence. In a right-to-left layout the text mirrors, while the meters, versions and dates keep their reading order.