Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Reviews blocks

Pro

Top Reviewers Table Reviews Block for React

A ranked table of eight recipe-community reviewers that a toggle group re-ranks by reviews, helpful votes or helpful rate, with a hover card of each one's latest review.

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 top-reviewers table for React with Base UI, for Gleanwood, a fictional recipe community. A header with a "Rank by" toggle group at its end sits over a real table running from rail to rail: rank, reviewer, reviews written, helpful votes, helpful rate and a bar. Press Most reviews, Most helpful or Helpful rate and the eight reviewers are ranked again, the ranked column turns to full weight and the bar is scaled to that figure. The helpful rate is worked out from each reviewer's helpful votes over the votes cast on their reviews. Every name is a button: hover, focus or press it and a card shows that reviewer's latest review (stars, recipe, text, date). On a phone the table keeps the rank, the reviewer and the one figure it is ranked by. It's built from Table markup, Toggle Group, Hover Card, Rating and Guides.

FAQ

How do I put in my own reviewers?

Edit REVIEWERS at the top of the file: each has reviews (written), helpful (helpful votes received), cast (votes cast on their reviews) and a latest review. The rate, the order and the bar widths are worked out from those when the block renders; ties fall back to the name.

What does re-ranking change?

The row order, the weight of the ranked column and the bar. The table keeps its height, so nothing below it moves, and a hidden status line says "Ranked by most helpful". There is no podium: it's a plain ranked table. The toggle group is Base UI's, with one pressed item that cannot be cleared.

How do I read a reviewer's latest review without a mouse?

Tab to the name: the card opens on focus and closes on Escape. On a touch screen a press opens it. Hovering also opens it, so the card works with a pointer, a keyboard and a finger.

What does a phone show?

Rank, reviewer and the figure being ranked by; the other figures and the bar come back from a tablet and desktop up. The table sits in a focusable scroll region as a fallback for very narrow screens.

Are the reviewers real?

No. The community, the reviewers and their numbers are example data, with initials in place of photos.

  • Pro

    Reviewer Profile Reviews

    Reviewers and rewards

    A reviewer's page for a board-game review site: a profile with figures worked out from her fourteen reviews, her ratings set against everyone's in paired bars, and her latest reviews with a sort Select.

  • Pro

    Badge Ranks Calculator Reviews

    Reviewers and rewards

    Five reviewer levels as a ladder with medals drawn in SVG and a two-field calculator that marks your level, the next one and what is still missing.

  • Pro

    Compact List Reviews

    Lists and pages

    Twelve one-line reviews of a notes app as a real table with sortable column heads, a Select that mirrors the sort, and nothing to open.

  • Pro

    Keyword Mentions Reviews

    Insights and trends

    A topic table for sofa reviews: mentions found by keywords, a share bar and the average rating of the reviews that mention each topic against the overall average, sortable, with the matching reviews under it.

  • Pro

    Re-ranking Leaderboard Awards

    Rankings and scores

    A ranked table of seven comparison tools in an index, with the site's own row in a ring, a segmented control that ranks it again by overall score, ease of use or support, and a methodology note that folds open.

  • Pro

    Social Links Team

    Lists and directories

    Twelve people of an API gateway company in two columns of ruled rows, each ending in text links to the GitHub, X and LinkedIn handles that person has, the handle visible as the link text.

All 100 reviews blocks