Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Reviews blocks

Pro

Tabbed Sections Reviews Block for Ark UI

Eighteen reviews of a sewing machine sorted into four tabs, Most recent, Most helpful, Critical and Verified, each with its derived count and three reviews.

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

Tabbed review sections for React with Ark UI, for Bobbinmill, a fictional sewing machine. A centred header gives the count and the average (worked out from the eighteen typed reviews), and a band of line tabs under a rule with + marks offers four groups: Most recent, Most helpful, Critical (one and two stars) and Verified purchases. Each tab carries its count, derived from the reviews, and its panel opens with a line saying which three it shows ("3 of the 4 reviews rated 1 or 2 stars, newest first") above three ruled review rows with the reviewer, the stars, the title and the text. Every panel is drawn once more, unseen, in the same cell, so switching tabs never moves the page. On a phone the tab list scrolls sideways. It's built from Tabs, Badge, Rating, Avatar and Guides.

FAQ

How do I change the tabs?

Each group is a typed list at the top of the file: RECENT, HELPFUL, CRITICAL and VERIFIED are built from REVIEWS with a sort or a filter, and TABS gives each a label, a count, a note and the three rows shown (SHOWN). Add a tab by adding an entry to TABS; the trigger, the count and the panel come from it. The "With photos" tab of other review lists is left out, since no review here carries a photo.

Where do the counts come from?

From the length of each group: all 18 reviews for the first two tabs, the reviews rated 1 or 2 stars for Critical, and the verified purchases for the last. Tab names include the count for screen readers ("Critical 4 reviews").

Why doesn't the page move when I switch tabs?

All four panels are drawn together, unseen, in the same grid cell, and the live panel sits on top of them, so the cell keeps the height of the tallest panel. The unseen copies are hidden from assistive technology and the keyboard.

How does it work with a keyboard?

The tab list is one tab stop; the arrow keys move between tabs and Home and End jump to the ends. The panel follows the selected tab, and each review keeps its title as an h3 under the section's h2.

How does it fit on a phone?

The four tabs scroll sideways inside the band, with the selected one kept in view, and each panel's rows stack the reviewer above the text. Nothing scrolls the page sideways at 320 pixels.

All 100 reviews blocks