shadcn.io is not affiliated with official shadcn/ui
Advanced Sort Reviews Block for Ark UI
A filter panel for tent reviews: a sort key, an order, star pills, a recency segment and a verified Switch beside the matching reviews, with removable chips, a live count and a bottom Sheet on phones.
Installation
Overview
Advanced sorting for React with Ark UI, for the Craggstead Two, a fictional two-person tent. A header with the title and one sentence (the average and the count, worked out from the reviews) sits over a band split by a divider. At the start, a filter panel: a Select for the sort key (date, most helpful or rating), a pair of toggles for descending or ascending, five star pills that combine (press 5 and 4 to see both), a segmented control for how recent (all time, 90 days, 30 days) and a Switch for verified purchases only. At the end, the matching reviews four at a time, under a live line ("Showing 4 of 12 reviews, newest first") and a row of chips, one for every filter that is on, each with a button that takes it off; a Reset button clears them all, and when nothing fits an empty state says so. Each review has its stars and their value in words, a title, the text, the reviewer with an initials avatar, a "Verified purchase" mark in words, a fixed date and how many readers found it helpful. Below the large breakpoint the panel becomes a bottom Sheet opened by a "Filters (2)" button that carries the number of filters on. The 12 reviews are typed at the top of the file and every figure is worked out from them. It's built from Select, Toggle Group, Segment Group, Switch, Sheet, Badge, Rating, Avatar, Empty and Guides, with CSS transitions only.
FAQ
How do I use my own reviews?
Replace REVIEWS at the top of the file. Each review has an id, name, rating from 1 to 5, an ISO date, a title, a body, a helpful count and a verified flag. The average, the count, the chips, the matches and the order are all worked out from that list. The list shows PAGE matches at a time (four); raise it if your page has room, or add a "Show more" button of your own.
How is "last 30 days" measured?
From a typed date, AS_OF, not from the visitor's clock, so the block reads the same on every server and in every screenshot. The window is worked out with UTC date arithmetic: 30 or 90 days before AS_OF, compared with each review's ISO date. Change AS_OF to today's date, or compute it on the server, once your reviews are live.
Why doesn't the page move when I filter?
An unseen copy of the four tallest reviews sits in the same grid cell as the live list and the empty state, so the cell is always as tall as a full page of results. The chip row has a fixed height and scrolls sideways when many chips are on, and the status line and Reset button keep their places. Sorting changes which four show and in what order; nothing below the block moves.
How does the panel work on a phone?
Below the large breakpoint the panel isn't drawn on the page. A "Filters (n)" button opens the same five controls in a Sheet that rises from the bottom (a bottom edge, so it reads the same in a right-to-left page), with Reset and Done buttons at its foot. The list behind it updates as you choose, and the live line is read out politely either way.
The Sheet takes open with onOpenChange reading details.open, and its trigger uses asChild.
How do the star pills and the chips relate?
The pills are a multiple-choice toggle group: press 5 and 4 and the list shows reviews of either rating, with a chip for each. Pressing a chip's button takes that one star off and puts focus on the chip row; pressing a pill again does the same. With no star on, every rating shows. The sort key and order are not filters, so they never make a chip.
Does it work right to left?
Yes. The panel, the chips and the review columns follow the page's direction, the order arrows point up and down so they never need mirroring, stars are mirrored so they fill from the start, and counts, dates and phrases with numbers are isolated so their digits keep their order.