shadcn.io is not affiliated with official shadcn/ui
Accordion Expandable Reviews Block for Radix UI
Twelve reviews of an interior paint as accordion rows: stars, title, excerpt and byline when closed; the whole review, a Helpful vote and the seller's reply when open.
Installation
Overview
An accordion of reviews for React with Radix UI, for Ashlarfold, a fictional interior paint. A start-aligned header gives the count and the average (worked out from the twelve typed reviews) and carries an "Expand all" button at its end. The rows run from rail to rail under a rule with + marks. A closed row shows the stars with their number, the title, a one-line excerpt, the reviewer and the date; an open row adds the whole review with its Helpful vote that counts once and, on five of the twelve, the seller's reply in a quiet box. Any number of rows can be open at once, and the header button opens or closes every row. On a phone the row wraps to the stars, the title and the byline. It's built from Accordion, Toggle, Rating, Avatar and Guides.
FAQ
How do I change the reviews and the replies?
Edit REVIEWS at the top of the file. Each entry has a body, a date, a helpful count, an id, the name, a rating, a title and a reply; leave reply empty and the reply box doesn't draw. The seller's replies are typed text, as the block sends nothing, and the "have a reply" count in the header is worked out from them.
How many rows can be open, and what does Expand all do?
Any number. The open rows are held in the block, so Expand all opens all twelve, the label turns into Collapse all, and a polite line says "All 12 reviews are open." Opening or closing a single row afterwards keeps the rest as they were.
The Accordion takes type="multiple" and a controlled value.
Are the closed reviews in the page's markup?
No. This Accordion renders a review's text only when its row opens. If search engines must read every review, render the typed list as plain text elsewhere or add structured data from the same REVIEWS.
How does it work with a keyboard and a screen reader?
Each row's trigger is a button inside its own h3, so a headings list shows all twelve titles, and it says whether it is expanded. Tab moves from row to row and into an open row's Helpful button; Enter or Space opens and closes a row.
The Up and Down arrows also move between rows, and Home and End jump to the first and last.