shadcn.io is not affiliated with official shadcn/ui
Restaurant Food Reviews Block for React
Fourteen 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.
Installation
Overview
A restaurant reviews section for React with Base UI, for Brasa & Fennel, a fictional neighbourhood restaurant. A start-aligned header gives the count and the average, then a bento on shared hairlines. The score cell holds the average of the four per-visit criteria (food, service, ambience and value) as a large figure with half-star stars, a price tier drawn as four dollar glyphs with its words, and the four criteria as figures with bars. Beside it is a real table of eight dishes with the number of visits that ordered each, the average rating of those visits and a tag word ("Signature" or "Seasonal") with a glyph. A dish's name is a button: pressing it narrows the visits below to the ones that ordered it, a polite line says what shows, and Clear brings them all back. The two newest visits of the choice sit side by side with their stars, title, text, the dishes ordered, the four criteria and the diner. Every figure is worked out from the typed visits, an unseen copy of every choice holds the height, and on a phone the table drops its Orders column. It's built from Toggle, Rating, Badge, Avatar, Button and Guides, with a native table.
FAQ
How are the dish figures worked out?
From the typed VISITS. A dish's orders are the visits that ordered it, and its average is the mean of those visits' own ratings, one decimal by integer maths. A visit's rating is the average of its four criteria, to the nearest whole star. Edit DISHES and VISITS at the top of the file to use your own.
How does pressing a dish work?
Each dish name is a toggle button inside the table's row header. Pressing it narrows the visits to those that ordered it and marks the row; pressing it again, or Clear, shows every visit. Clear puts focus back on the dish that filtered. An unseen copy of every choice keeps the page from moving.
How is the price tier shown?
By four dollar glyphs, three of them full, and the words "Three of four, mains from $16 to $26". The words carry the meaning, so it never relies on the glyphs or a colour.
How are Signature and Seasonal marked?
By a glyph and the word (a chef's hat for Signature, a leaf for Seasonal), with a dash for a dish with neither. Nothing is tinted by colour.
Related
- Pro
Keyword Mentions Reviews
Insights and trendsA topic table for sofa reviews: mentions found by keywords, a share bar and the average rating of the reviews that mention each topic against the overall average, sortable, with the matching reviews under it.
- 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
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
Tagged Categories Reviews
Filter and searchA tag sidebar for plant-subscription reviews: eight tags with counts and frequency bars as toggles, an all-or-any Switch, a live count, and reviews that carry their tags as pills.
- Pro
Compact List Reviews
Lists and pagesTwelve one-line reviews of a notes app as a real table with sortable column heads, a Select that mirrors the sort, and nothing to open.
- 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.