Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Changelog blocks

Pro

Plain and Technical Customer Changelog Block for Radix UI

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.

Framework
UI library

Preview

Preview width

Installation

Part of Pro
Pro unlocks the code and one-line install of every Pro button and text effect, plus the MCP for your AI editor.
Get ProSign in
Have Pro already? Sign in to open it.Opens here as soon as you're Pro.

Overview

A customer changelog for React with Radix 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.

How does it fit on a phone and in a right-to-left layout?

Below lg the switch sits under the header and each row stacks its version, date and tag above the text, so nothing scrolls sideways at 320 pixels. In a right-to-left layout the rows mirror, and the version numbers stay left to right.

What moves, and what happens with reduced motion?

The header and the content fade up once on load, with CSS transitions. With reduced motion they are off and the block simply appears.

All 200 changelog blocks