shadcn.io is not affiliated with official shadcn/ui
Social Feed Reviews Block for React
Reviews as posts in a community feed with Like and Save toggles, a comment thread with a reply field, a Copy link button, a poster badge and drawn attachments.
Installation
Overview
A social feed of reviews for React with Base UI, for Hearthlist, a fictional cookware community. A centred header gives the count, then a narrow column of three posts as cells with overshoot. Each post is one review: the cook, a word for their standing in the community, the date, the product, the stars, the title and the text, the pictures attached (small greyscale drawings and a count), and a row of actions. Like and Save are toggles with their counts, Comments opens the thread and a reply field, and Copy link puts the post's address on the clipboard. Replies, likes and saves stay on this page: nothing is sent. On a phone the posts keep their single column and the actions wrap. It's built from Toggle, Collapsible, Input, CopyButton, Rating, Badge, Avatar, Button and Guides.
FAQ
Do likes, saves and replies go anywhere?
No. Like and Save are toggles that add one to their count and can be taken back, and a reply appears at the end of that post's thread with a polite line saying it stays on this page. Reloading the page forgets all of it.
How do the comments open?
The Comments button is a disclosure: it opens the thread and a reply field under the post. The thread is a real list, new replies join its end, and the count on the button follows. An empty reply is not added: the field is focused and a line asks for a few words.
What does Copy link do?
It copies the post's address to the clipboard, using the browser's own clipboard, and a polite line says "Link copied". The addresses are on a reserved example domain, so they point nowhere.
Are the pictures real photographs?
No. Each attachment is a small drawn greyscale tile and the text beside it gives the count. A real feed would show the cooks' own photographs here.
Related
- Pro
Reply Thread Reviews
Votes and repliesOne three-star dishwasher review with its conversation in a single framed window: the seller's reply, the buyer's follow-up and the seller again under depth rails, and a real reply form with a live character count that appends your reply to the end.
- Pro
Emoji Reactions Reviews
Votes and repliesFour skateboard reviews that each take six reactions from a popover of toggles with counts, show their top three beside a total, and feed a ranking of the product's reactions beside them behind a divider.
- Pro
Upvote System Reviews
Votes and repliesSix reviews of a board game as cards with an Up and Down pill and a net score worked out from the votes, tabs for Top, New and Controversial, and a collapsible that folds reviews at a net of minus three or lower.
- Pro
Helpful Votes Reviews
Votes and repliesThe best favourable and the best critical review of a water filter jug side by side, each with a Helpful vote and a worked-out 'n of m found this helpful', above the other reviews in ruled rows with a most-helpful or newest order.
- Pro
Masonry Layout Reviews
Cards and wallsTwelve reviews of pruning shears as cards of every length in CSS columns, with a star filter, an order switch, a polite count and a Helpful vote on each card.
- Pro
Question and Answer Reviews
Votes and repliesQuestions about a pressure cooker answered by people who own one: a search box and an All, Answered or Unanswered group, answers with the seller's pinned first, a Helpful toggle on each, an inline answer form and an Ask a question dialog.