Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Reviews blocks

Pro

Infinite Scroll Reviews Block for Radix UI

Twenty reviews of a podcast app ten at a time in a fixed-height scroll region that appends five more at its end, with a Load more button, placeholder rows and a polite count.

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

An infinite scroll of reviews for React with Radix UI, for Voleline, a fictional podcast app. A compact header leads into a band split by a divider: at the start the score summary of all twenty typed reviews (the average with half-star Rating, the share who rated it 4 or 5 and five distribution rows), at the end a fixed-height scroll region with a polite "Showing 10 of 20 reviews" above it. Reaching the end of the region, or pressing "Load more reviews", shows two placeholder rows for a moment and appends five more; the page never moves. After the last batch a note says that is all of them. On a phone the summary sits on top and the region is 420 pixels tall. It's built from Rating, Skeleton, Button, Avatar and Guides.

FAQ

How do I connect it to a real API?

Replace the 700 millisecond timer in the effect with a request for the next BATCH reviews and append them to the list; shown, the status line, the button and the end note all follow from the array's length. The block sends nothing and holds no real data, and the summary counts the whole typed set, so with an API you would pass the totals in.

How does it work with a keyboard and a screen reader?

The scroll region is a named, focusable section: Tab reaches it and the arrow keys, Page Down and End scroll it, and reaching its end loads more. "Load more reviews" is a real button at the end of the list; after it adds five, focus moves to the first new review, which is scrolled to the top of the region. The status line announces "Loading 5 more reviews" and then the new count.

Why a plain scroll region and not the catalog ScrollArea?

The scroll position has to be read and set, and the catalog ScrollArea wraps its content in a different viewport on each library. A native overflow-y-auto section behaves the same on all four, scrolls with touch momentum and overscroll-contain keeps it from dragging the page.

What moves, and what happens with reduced motion?

The header and parts fade up once on load, and the placeholder rows pulse while they wait. With reduced motion the entrances are off and the rows are still. New reviews simply appear below the old ones.

How does it fit on a phone?

The summary (score, stars and the five rows) stacks above the region, which is 420 pixels tall so the summary and the first review are on screen together. The page itself scrolls past the region as usual.

All 100 reviews blocks