shadcn.io is not affiliated with official shadcn/ui
Gradient Header Changelog Block for Ark UI
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 Ark 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.