Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Changelog blocks

Pro

Load More Changelog Block for Ark UI

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

All 200 changelog blocks