Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Changelog blocks

Pro

Load More Changelog Block for React

A feed reader's release list that shows three releases and loads three more on a button, with focus on the first new one, a live 'Showing 6 of 9' line and an end state that says you are up to date.

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 load-more release list for React with Base UI, written for Morefeed, a fictional feed reader. A start-aligned header sits over three releases as rows from rail to rail, each an article with its version and day, a title, a type tag and a sentence, and a foot band with a live "Showing 3 of 9" and an outline "Load 3 more" button. The rows sit in their own scrolling region of a fixed height, so loading never grows the block: the button appends three releases, scrolls the region (not the page) to the first new one and moves focus to it. After the ninth release the button reads "You're up to date" and stays in place, quiet but focusable. An unseen copy of each batch of three sizes the region, and on a phone the same bands hold with the version above each title. It's built from Button, Badge and Guides, with your theme's tokens for every colour. The releases are example data.

FAQ

How do I change the releases and the batch size?

Edit RELEASES at the top of the file, newest first, and BATCH. The button label, the "Showing 6 of 9" line and the end state come from the array and the batch size, so nine releases at three a time give two loads; keep the total a multiple of the batch so the last batch is full.

Why do the rows scroll inside the block?

So the page stays where it is. The region is as tall as the tallest batch of three, set by an unseen copy, and a load appends rows inside it and scrolls it to the first new release. If you would rather have the block grow, remove the absolute region and render the list in flow.

Where does focus go after Load 3 more?

To the first new release, an article that takes focus without being a tab stop, so a keyboard user can read on from there. The region itself is a focusable, labelled scroll area ("Releases"), and a polite status line says "Showing 6 of 9". At the end the button is marked as disabled to assistive technology but keeps focus, so a keyboard user is never dropped.

Is it the same on every React base and port?

Yes in look and behaviour. The button takes an onClick handler.

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

Each row stacks the version and day above the title, and the foot band puts the status over the button. In a right-to-left layout the rows and the foot mirror, and versions and counts keep their reading order.

What moves, and what happens with reduced motion?

The header and bands fade up once on load, and a load scrolls the region to the new rows at once. With reduced motion the entrance is off too.

  • Pro

    Pagination Changelog

    Filters and browsing

    A reading app's release archive as rows, four to a page over three pages, with the catalog pagination in a band at the foot, a polite 'Showing 5 to 8 of 12' line and a height that never changes between pages.

  • Pro

    Release Timeline Changelog

    Lists and timelines

    A 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

    Condensed Feed Changelog

    Lists and timelines

    Twelve releases of a news reader as a single-line ledger: the day, a type word, the headline and the version on one row, month rows between, and the older rows opening in place.

  • Pro

    Filterable Changelog

    Filters and browsing

    The plainest filtered release list: one row of choices with counts (All, New, Improved, Fixed, Security) over nine releases, a live count of what is showing, and a height that never changes.

  • Pro

    Grouped Date Changelog

    Lists and timelines

    Changes grouped by the day they shipped: each day has a drawn calendar tile (month, big day number, weekday) beside a dated heading and its changes with a type tag, a sentence and the release.

  • Pro

    Search Changelog

    Filters and browsing

    A docs search tool's eight releases behind a search band: type to filter, matched words marked, a slash key that focuses the field, a live count and an empty state with a clear button, on a height that never changes.

All 200 changelog blocks