shadcn.io is not affiliated with official shadcn/ui
Gradient Header Changelog Block for React
Releases as full-width version bands: each version set huge in mono with digits fading to a third of the text colour, the day and a line under it, and what changed in a definition list at the band's end.
Installation
Overview
A version-banded changelog for React with Base UI, written for Banderole, a fictional UI kit. A start-aligned header over three full-width bands in the page column, newest first. Each band opens with its version set very large in mono, the digits fading from the text colour to a third of it (a monochrome gradient clipped to the text, no colour), then the day and a one-line summary; at the band's end a definition list sets what changed, one row per change with its type (an icon and a word) and the text. Bands alternate between the page and a soft tint, the newest carries a faint monochrome glow behind its version, and each draws its top rule with + marks on the page's rails. On a phone the version sits above its list. The block follows your theme: there is no coloured gradient and no dark scope. It's built from Guides with your theme's tokens for every colour. The releases are example data.
FAQ
How do I change the releases?
Edit RELEASES at the top of the file, newest first: each has a version, a date as an ISO day, a one-line summary and a list of changes, each a kind and a text. The bands alternate tint by position, so adding or removing one keeps the rhythm. The version is rendered with a leading "v".
How is the fading version made, and is it still text?
The version is ordinary text in a span with bg-linear-to-b from-foreground to-foreground/35 bg-clip-text text-transparent: a gradient between your theme's own foreground tones, clipped to the glyphs. It stays selectable, searchable and readable by a screen reader, and it follows light and dark themes. The version is also the band's heading and the date and summary beside it carry the same information in plain text colour.
What does a screen reader hear?
A list of three releases; each has its version as a heading, the day and summary, then a description list of changes read as "New, A Combobox that filters as you type" and so on. The glow and the tint are decoration.
Related
- +~+!~Pro
Quiet Mono Release Log
Lists and timelinesA quiet release log of five single mono lines: an inverted version chip, a plain date, a sigil and a word for the kind of change, and the change itself, between hairlines.
- 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
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
Card Grid Changelog
Spotlights and mediaSix releases of a dashboard builder as a bento of cells on shared hairlines: the newest spans two columns and two rows with a short list, the rest are single cells with a feature icon, a type tag, version, date, title and a Read more link.
- Pro
Compact Timeline Changelog
Lists and timelinesThe last three weeks of a time-tracking app on one thin rail: six releases of two small lines each, with the dot's shape (circle, diamond, square, ring) telling the kind and a one-line key.
- Pro
Feature Spotlight Changelog
Spotlights and mediaOne release with its headline feature in the spotlight: a drawn greyscale editor with two named cursors beside the title and why it matters, and a band of four smaller changes underneath.