shadcn.io is not affiliated with official shadcn/ui
Color Coded Changelog Block for Vue
A changelog for a palette tool whose five kinds of change are coded without colour: a pattern strip, an icon and a word each, with a legend that dims the other rows in place.
Installation
Overview
A kind-coded changelog for Vue with Ark UI, written for Swatchnote, a fictional palette tool. The five kinds of change (New, Improved, Fixed, Security, Deprecated) are told apart by shape, never by hue: a vertical strip down the start of each row in its own pattern (solid, dashed, dotted, hatched, double), a type tag with an icon and a word, and a headline weight that follows the kind. Above the list a legend of buttons, one per kind plus All, each showing its pattern and its count, is a single choice that can't be switched off: picking a kind dims the other rows in place with a solid tint, so the whole log stays in view, and a polite status says how many are highlighted. Six releases fill the rows, each with its version, day and a sentence. On a phone the legend scrolls sideways. The page's rails and top rule come from the Guides spine, and the list ends the block. It's built from Guides, Toggle Group and Badge, with CSS transitions for the entrance and the dimming and your theme's tokens for every colour. For changelogs that must read in greyscale, in print and for readers who can't tell colours apart. The releases are example data.
FAQ
How do I change the releases or add a kind?
Edit RELEASES at the top of the file, newest first: each has a version, a date as an ISO day, a title, a summary and its kind. A kind is a constant (NEW, IMPROVED, FIXED, SECURITY, DEPRECATED) with an icon, an id, a label, a strip (the classes that draw its pattern) and a weight (its headline's font weight). Add one to the constants and to KINDS, and the legend, the counts and the status follow.
Why patterns instead of colours?
A colour that carries meaning fails for anyone who can't tell it apart, in print and in greyscale. Here a kind is its pattern, its icon and its word together, and the word is always text, so a screen reader hears "Security" whatever the theme. The strips draw in the text colour, so they follow your theme and invert inside a pressed legend button.
Why does it dim the other rows instead of hiding them?
So the log keeps its length and its place: nothing below a row moves when you pick a kind, and the rows you dimmed are still there to read. A dimmed row takes a solid tint and a slightly softer text colour, never an opacity, so its text stays readable. The block that hides rows is the filterable changelog.
What does a screen reader hear?
The legend is a labelled group of buttons, each named by its kind and its count. Choosing one changes a polite status ("Fixed: 1 of 6 releases highlighted, the rest dimmed."). Each row is an article with its version, day, kind and title in reading order; the strips and the legend's patterns are decoration and hidden from assistive technology.
How does it fit on a phone and in a right-to-left layout?
Below sm each row stacks its version, day and tag above the title and sentence, and the legend scrolls sideways inside its own row; nothing else scrolls at 320 pixels. In a right-to-left layout the strips move to the start edge, the legend starts at the start edge, and versions keep their reading order.