shadcn.io is not affiliated with official shadcn/ui
Plain and Technical Customer Changelog Block for React
A release list for a clinic booking product that tells each of three releases in two wordings, switched in place by a Plain / Technical control at the header's end.
Installation
Overview
A customer changelog for React with Base UI, written for Plainnote, a fictional booking product for clinics. A start-aligned header carries the title, one sentence and a Plain / Technical switch. Under it three releases sit as rows on shared hairlines: the version, date and type tag at the start (the same in both wordings), the title and its sentence in the middle, and a note at the end. Plain says what happened and what it means for the front desk, with no jargon; Technical gives the endpoint, the ticket and the detail. Choosing a wording rewrites every row in place and a polite line says which one is showing. It's built from Guides, Badge and Segment Group, with CSS transitions for the entrance and your theme's tokens for every colour. For clinics, schools, shops and any product whose readers are not its developers. The releases are example data.
FAQ
How do I change the releases?
Edit RELEASES at the top of the file, newest first. Each release has a version, an ISO date ("2026-09-23"), a kind and two voices, plain and technical, each with a title, a sentence, a noteLabel and a note. The date on screen is spelled out from the ISO day by a small helper, so it reads the same on the server and in every browser. Dates are fixed, never computed from today.
Why doesn't the layout jump when I switch wording?
Both wordings of each text sit in one grid cell, so the cell is as tall as the longer one. The wording that isn't chosen is invisible, inert and hidden from assistive technology, so a screen reader hears one wording only. The status line under the block says "Plain wording" or "Technical wording" after a change.
Which control is the switch, and does it work with a keyboard?
It's the catalog Segment Group, a radio group: Tab reaches it and the arrow keys change the wording. Its API is the same on every base and on the Vue, Svelte and Solid ports. Nothing is saved: the choice lives in the block and resets on reload.
How are the change types told apart without colour?
Each type tag is an outline badge with an icon and the word (New, Improved, Fixed), so it reads in greyscale and to a screen reader, which skips the icon.
Related
- Pro
Release Timeline Changelog
Lists and timelinesA release timeline for an API client: a compact header with a Subscribe link, then the latest four releases on a hairline rail with dots, each with its version, date, type tags, a linked title and its notes, and View all releases at the foot.
- Pro
Accordion Changelog
Lists and timelinesA release list for release-notes software: five releases as accordion rows, each with its version, date, one-line summary and change count, the newest open on a list of typed changes, and a foot band that links to every release.
- Pro
Filterable Changelog
Filters and browsingThe plainest filtered release list: one row of choices with counts (All, New, Improved, Fixed, Security) over nine releases, a live count of what is showing, and a height that never changes.
- Pro
Category Sections Changelog
Filters and browsingA changelog for a file organiser grouped under Added, Improved and Fixed headings, with a sticky index of the three sections beside them and every change tagged with the release it shipped in.
- Pro
Changelog Features
Timelines and stepsA release feed for a changelog tool that presents its features as release entries: a New, Improved and Fixed filter with counts, a version rail, and a collapsible What changed list on each.
- Pro
Changelog Summary About
TimelinesA release summary for a release-notes tool: a segmented bar of what changed since launch (added, improved, fixed) with counts, a filter by type and the latest four releases as rows.