shadcn.io is not affiliated with official shadcn/ui
Changelog Features Block for React
A 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.
Installation
Overview
A release-feed features section for React with Base UI. Each feature is written as a release: a version, a relative date ("3 weeks ago"), a kind badge and the feature's name and sentence, with a "What changed" list that opens under it. A toggle group in the header filters the feed by New, Improved and Fixed, each with its count read from the data; picking none shows every release. A rail at the start holds the version and its line meets every band's rule at + marks, and the bands run from rail to rail. On a phone the rail becomes the first line of each row. It's built from Toggle Group, Collapsible, Badge, Status, Button and Guides, and it follows your theme. For changelog tools, developer products and any page that sells itself by what it shipped lately.
FAQ
How do I change the releases?
Edit RELEASES at the top of the file, newest first. Each has a version, a relative when, a kind (NEW, IMPROVED or FIXED), a title, a sentence and its changes. The filter's counts and the "3 of 7 releases" line are worked out from the list. Dates are relative on purpose: no year to go stale.
How does the filter work?
It's a multiple-choice toggle group: pick New, or New and Fixed, and only those releases show. Picking none shows all of them. A polite line under the group says "3 of 7 releases" when it changes, and each toggle's count is also read out ("New, 3 releases").
The group's value is an array of the picked kinds.
Does filtering move the page?
No: an unseen copy of the full feed sits in the same grid cell and holds its height, so the blocks below stay where they are while releases come and go.
How does What changed work?
Each release has a collapsible: the button says "What changed" and, for a screen reader, which version; it opens a short list of the details with a height animation that is off under reduced motion. They start closed so the feed is a skim, and any number can be open at once.
Related
- Pro
Timeline Evolution Story Features
Timelines and stepsA features section that tells five years of an edge runtime as year tabs on one rail: what shipped, a cold start before and after in rolling digits, and a five-bar history of regions.
- Pro
Ribbon Wave Timeline Features
Timelines and stepsA lifecycle drawn as a sine ribbon for a customer-success tool: six stages alternating above and below the wave, all readable at once, with a You are here chip under the stage an account is at.
- Pro
Added Removed Diff List Features
App screensA unified diff of one config file in a hairline frame, with + and - gutters in foreground weights, one caption beside each hunk, folded runs of unchanged lines that open in place, and a footer counting the changes.
- Pro
Changelog Hero
Updates and timelinesA compact centred hero for a build platform that ships weekly, over three release cells with hairlines that overshoot their corners.
- Pro
Changelog Preview Hero
Updates and timelinesA split hero for a code editor that releases on a schedule: the headline on one side, a ruled ledger of the four latest releases across a divider.
- Pro
Bento Grid Features
BentosA bento of five features for an issue tracker, each cell drawn as the product at work: a live board with teammates' cursors, a pull request, a burndown, a triage rule and a typed SDK, in cells that share their hairlines.