shadcn.io is not affiliated with official shadcn/ui
Author Grouped Changelog Block for Ark UI
The twelve changes of one code-review tool's release regrouped by a toggle: by author, each cell a person with their changes and a type tag each; by type, each cell a kind of change with who made it.
Installation
Overview
A grouped changelog for React with Ark UI, written for Bylane, a fictional code-review tool, and its 6.2 release. A start-aligned header carries the title and one sentence, with a two-way toggle at its end: By author or By type. Under a rule with + marks, a grid of cells with overshooting lines holds the groups, busiest first. By author, each cell is a person (initials, name, role and how many changes) with their changes, each tagged with an icon and a word (New, Improved, Fixed, Security); by type, each cell is a kind of change with its changes and the name of whoever made each one. Both groupings come from the same list of twelve changes, so the counts always agree. Switching announces the new grouping in a polite line, and the grid keeps its height so nothing below it moves. On a phone the cells stack in one column. The page's rails and top rule come from the Guides spine, so it lines up with its neighbours in a stack. It's built from Toggle Group, Avatar, Badge and Guides, with CSS transitions for the entrance and your theme's tokens for every colour. For release pages that credit the people behind a release. The people and changes are example data.
FAQ
How do I change the people and the changes?
Edit PEOPLE and CHANGES at the top of the file. A person has an id, a name and a role; a change has an id, an author (a person's id), a kind and a sentence. Both groupings are derived from those two lists, so the order, the counts and the "N people" lines follow without anything else to edit. The kinds are constants (NEW, IMPROVED, FIXED, SECURITY) listed in KINDS; add one and its cell appears. The header's "Twelve changes from four people" is plain text: update it with the data.
How are the cells ordered?
By how many changes they hold, most first, with ties kept in the order of the data. The same rule runs for both groupings, so the busiest author or the biggest kind of change always leads.
How does the toggle work with a keyboard and a screen reader?
It is a single-choice group named Group the changes, with By author on at first; one item is always on. Tab moves into it and the arrow keys move between the two items. Picking one swaps the grid at once and a polite line says, for example, "Grouped by type: 4 kinds of change". The unseen copy that holds the height is hidden from assistive technology and the keyboard.
How are the types told apart without colour?
Each tag is an outline badge with an icon and the word, so it reads in greyscale, in any theme and to a screen reader, which hears the word and skips the icon. By type, the icon sits in a round plate beside the cell's heading, and each change carries its author's name instead of a tag.