shadcn.io is not affiliated with official shadcn/ui
Filter Sort Bar Reviews Block for Vue
A toolbar band for rain-jacket reviews: a rating Select, a Verified toggle, a date Popover and a sort Select, a live count with removable chips, and the matching reviews as ruled rows.
Installation
Overview
A filter and sort bar for Vue with Ark UI, for the Sedgebridge Tarn, a fictional rain jacket. A compact header with the title and one sentence (the average and the count, worked out from the reviews) sits over a band between two rules with + marks. Its first row is the toolbar: a "Rating" Select (any rating, 4 stars and up, 3 stars and up), a Verified toggle, a "Date" Popover with three presets (all time, last 90 days, last 30 days) and a sort Select (newest, most helpful, highest rated, lowest rated). On a phone the toolbar scrolls sideways, so every control keeps its size. The second row holds the live line ("Showing 5 of 14 reviews"), one chip for every filter that is on, each with a button that takes it off, and a Clear button. Under the band, the matching reviews as ruled rows, five at a time, each with 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. When nothing fits, an empty state says so with a button that clears the filters. It's built from Select, Toggle, Popover, 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 matches, the chips and the order are all worked out from that list. The rows show PAGE matches at a time (five); the line says how many matched, so a visitor knows when the rows are only the first few.
What does "Showing 5 of 14 reviews" count?
The first number is the rows on screen and the second is how many reviews match the filters, so with no filter on it reads "5 of 14" and with "4 stars and up" on it reads "5 of 9". Sorting reorders the matches and changes which five show. The line is a polite live region, so a screen reader hears the new count after each change without losing its place.
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. The window is worked out with UTC date arithmetic and compared with each review's ISO date. Change AS_OF, 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 five tallest reviews sits in the same grid cell as the live rows and the empty state, so the cell is always as tall as a full list. The toolbar's controls have fixed widths, the chip row has a fixed height and scrolls sideways when it must, and Clear keeps its place even while hidden.