shadcn.io is not affiliated with official shadcn/ui
Hotel Travel Reviews Block for React
Eighteen 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.
Installation
Overview
A hotel reviews section for React with Base UI, for the Marrowfield Hotel, a fictional small town hotel. A start-aligned header gives the count, then a band of line tabs under a rule with + marks: All, Solo, Couples, Families and Business, each with its count. Every panel opens with a summary band split by a divider: the average of the five category scores with half-star stars and the count at the start, and the five category scores (cleanliness, comfort, location, staff and value, each a figure and a bar) at the end, all worked out from the reviews of that type alone. Under it are the three newest stays as ruled rows with the guest, the room and the nights, the stars, the title, the text, and what they liked and disliked marked by a Plus or a Minus and the word. An unseen copy of every panel holds the height, so switching tabs never moves the page. On a phone the tab list scrolls sideways and the categories sit two across. It's built from Tabs, Rating, Badge, Avatar and Guides, shows no photographs and names no booking site.
FAQ
How are the five category scores worked out?
Each typed stay carries five scores from 1 to 5. A tab averages the stays of its kind of trip, one decimal by integer maths, and the bar is that score out of five. A stay's own stars are the average of its five scores, to the nearest whole star. Edit STAYS at the top of the file to use your own.
What do the tabs change?
The summary band and the three stays shown. Each tab's count is the number of reviews of that kind, and the panel says which it shows ("Showing the 3 newest of 5 reviews."). Every panel is drawn once more, unseen, in the same grid cell, so the block never changes height.
How are likes and dislikes marked?
By an icon and a word, never by colour: a Plus with "Liked" and a Minus with "Disliked". A stay with nothing to dislike shows only the first line.
How do the tabs work from the keyboard?
Arrow keys move between the tabs, Home and End go to the first and last, and Tab moves into the open panel. On React Aria and the other bases the behaviour is the same.
Related
- Pro
Tabbed Sections Reviews
Lists and pagesEighteen reviews of a sewing machine sorted into four tabs, Most recent, Most helpful, Critical and Verified, each with its derived count and three reviews.
- 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
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
Restaurant Food Reviews
By industryFourteen visits to a neighbourhood restaurant: a score cell with a price tier, a dish table whose rows filter the visits, and visit cards with the dishes ordered and four criteria.
- Pro
Location Based Reviews
By industryA 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.
- Pro
Criterion Picker Multi-Criteria Reviews
Criteria and compareReviews that each score five criteria, with a picker that sorts the list by one criterion and shows every criterion's average, and the five scores of each review drawn as dots.