shadcn.io is not affiliated with official shadcn/ui
Pagination Changelog Block for Ark UI
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.
Installation
Overview
A paginated release archive for React with Ark UI, written for Leafturn, a fictional reading app. A start-aligned header sits over twelve releases shown four to a page as rows that run from rail to rail, each an article with its version and day at the start and its title, a type tag (an icon and a word: New, Improved, Fixed, Deprecated or Security) and one sentence at the end. The catalog Pagination sits in a band at the foot that ends the block: Previous, the page numbers with the current one outlined, and Next. Choosing a page swaps the four rows in place and a polite line says "Showing 5 to 8 of 12". Every page is drawn once more, unseen, in the same grid cell, so the list keeps the height of the tallest page and the pager never moves under your pointer. On a phone each row stacks its version above the title and the Previous and Next labels fold to arrows. It's built from Pagination, Badge and Guides, with CSS for the entrance and your theme's tokens for every colour. The releases are example data.
FAQ
How do I change the releases and the page size?
Edit RELEASES at the top of the file, newest first, and PER_PAGE. The page numbers, the "Showing 5 to 8 of 12" line and the last page all come from the array, so twelve releases at four a page give three numbers and thirteen would give four, the last with one row. A release is a version, a date as an ISO day, a title, a summary and a kind.
Are the page numbers real links?
They point at ?page=2 and so on, and the click is handled in place: the rows swap without a reload. To page on the server, drop the handlers and read page from the address in your route, or swap the state for your router's search params.
Each number is an a with an href and an onClick that stops the navigation and sets the page.
Why does the pager not move when I change page?
The list is drawn twice in one grid cell: the current page on top, and an unseen copy of all three pages underneath, hidden from assistive technology and the keyboard. The cell is as tall as the tallest page, so the pager stays where you clicked even when a page has shorter rows.
How does it work with a keyboard and a screen reader?
The pager is a labelled navigation ("Release pages") with a list of links, and the current page is marked with aria-current="page". Tab moves through Previous, the numbers and Next, and Enter changes the page. On the first page Previous, and on the last page Next, is dimmed and leaves the tab order. The line beside the pager is a polite status, so a screen reader hears "Showing 5 to 8 of 12" after a change.
Does it work right to left and on a phone?
Yes. The rows and the pager mirror, the Previous and Next arrows flip, and the range, dates and versions are isolated so "5 to 8 of 12" keeps its order. On a phone the rows stack, the pager shows arrows and numbers only, and nothing scrolls sideways at 320 pixels.