shadcn.io is not affiliated with official shadcn/ui
Location Based Reviews Block for React
A branch ranking for a coworking chain: six cities as accordion rows with the average, count and reply share worked out from star counts, a rating or volume ranking, and each branch's reviews.
Installation
Overview
A branch ranking for React with Base UI, for Quoinhall Workspaces, a fictional coworking chain with six branches (the cities are real, the chain is invented). A start-aligned header gives the number of branches and reviews and carries a two-choice group at its end that ranks them by rating or by volume. Under a rule with + marks, the branches are accordion rows rail to rail: its rank, the city, half-star stars with the average, the review count and the share of reviews the team replied to, all worked out from each branch's star counts. Opening a row shows two of that branch's reviews as articles on a shared hairline. On a phone the figures wrap under the city. There is no map. It's built from Accordion, ToggleGroup, Rating, Avatar and Guides.
FAQ
Where do the averages and shares come from?
From each branch's typed tally, its review count at each star rating, five stars first. The count is the sum, the average is every star given over that count (one decimal, by integer maths), and the reply share is the replied count over the review count. Edit BRANCHES at the top of the file to use your own.
What does the ranking choice do?
It re-orders the rows by highest average or by most reviews, with ties going alphabetically by city, and the rank numbers follow. Open rows stay open as they move, and a polite line says which branch comes first.
How does the accordion behave?
One branch is open at a time and the open one can be closed again. Tab reaches each row button, Enter and Space open a row, and some libraries also move between rows with the arrow keys. Each row sits in a real heading so screen readers can jump between branches.
Why only two reviews per branch?
They are a sample, not the whole set: the row's count comes from the star counts and says how many exist. The two typed reviews per branch show what a review there looks like, one of them often critical.
Related
- Pro
Accordion Expandable Reviews
Lists and pagesTwelve 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.
- Pro
Accordion Detailed Breakdown Reviews
Criteria and compareFour areas of an e-bike as accordion rows from rail to rail, each with a bar, a score and a signed change against the previous quarter, opening into three scored parts, under a sentence that names the strongest and the weakest.
- Pro
Hotel Travel Reviews
By industryEighteen stay reviews of a small town hotel in tabs by type of traveller, each tab re-deriving the five category scores, with room and night facts and liked and disliked lines.
- Pro
Star Rating Grid Reviews
Criteria and compareEight hand tools compared at a glance in a grid on shared hairlines, each with a drawing, stars, the average and count, and the share that recommend it, sorted by a Select and with a hover card of category scores.
- Pro
Weighted Category Ratings Reviews
Criteria and compareFive criteria as ruled rows with a bar, a score and a signed change against the previous quarter, and a Select that weighs them for everyday, commuting or gym use and re-derives the overall score.
- Pro
Service Provider Reviews
By industryReviews of a local plumbing and heating firm with a profile column, a job-type group that re-derives the rating, services and project cost on each review and the firm's replies.