Skip to content
shadcn.io

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.

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.
Have Pro already? Sign in to open it.Opens here as soon as you're Pro.

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.

Is this a changelog page?

No: it sells the product's features by showing them as releases, a handful of the latest, with no history and no year. Link the full feed from the header if you have one.

What changes on a phone?

The version, the date and the kind badge become one line above each entry, the toggle group wraps under the heading, and the bands keep their rules. Nothing scrolls sideways at 320 pixels.

  • Pro

    A 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

    A 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

    A 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 timelines

    A 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 timelines

    A 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

    A 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.