Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Reviews blocks

Pro

Paginated List Reviews Block for React Aria

Twenty-four reviews of a cookbook five to a page, with a page-size Select, the catalog pagination with ellipsis and a polite 'Showing 6 to 10 of 24'.

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 paginated list of reviews for React with React Aria, for Ember & Rye, a fictional cookbook of wood-fired breads. A centred header gives the count and the average (worked out from the twenty-four typed reviews), then a thin toolbar band holds the page's own heading, "Reviews 6 to 10", and a Select for 3, 5 or 10 reviews per page. Ruled rows run from rail to rail, each with the reviewer, the stars with their value in words, the title and the text. A closing band ends the block with a polite "Showing 6 to 10 of 24" and the catalog Pagination with ellipsis. Choosing a page moves focus to the heading, and every page is drawn once more, unseen, so the pager never moves. It's built from Pagination, Select, Rating, Avatar and Guides.

FAQ

How do I change the page sizes?

Edit SIZES (the labels and values the Select shows) and the first useState(5) for the default. Changing the size returns to page 1. The number of pages, the "Showing" line and the heading are all computed from REVIEWS and the size, so adding a review needs no other edit.

How does the pager handle many pages?

Up to seven pages it draws every number. Past that it draws seven slots, the first, the last and a window around the current page with an ellipsis on each side it skips, so the pager keeps its width as you move through it. Previous and Next dim and leave the tab order at the ends.

Where does focus go when the page changes?

To the "Reviews 6 to 10" heading above the list, so a keyboard or screen reader user lands just before the new reviews. The status line also announces the new range. Page numbers are real links to ?page=n; the click swaps the rows in place. React Aria's pagination links are buttons without an address: they respond to press and the page changes in place.

Why doesn't the pager move between pages?

Every page of the current size is drawn again, unseen, in the same grid cell as the live page, so the cell keeps the height of the tallest page. Changing the page size changes that height on purpose, since you asked for more or fewer rows.

How does it fit on a phone?

Each review stacks its reviewer above its text, the toolbar puts the Select under the heading at full width and the pager sits under the status line. Pick 3 per page for the shortest scroll.

All 100 reviews blocks