shadcn.io is not affiliated with official shadcn/ui
Comment Thread Social Feed Gallery Block for React
A neighbourhood feed in a scroll area: three posts with likes, a thread that opens in place and a form that adds your comment for this visit.
Installation
Overview
A social feed gallery for React with Base UI. A split: at the start, the title, a sentence and three live totals (posts, likes, comments) that follow what you do; at the end, the feed in a hairline frame with corner marks, a scroll area of fixed height holding three posts. Each post has an author with initials, a fixed date, a drawn picture, a caption, a like Toggle with its count and a comment button that opens the thread in place. The thread lists the comments and a real form adds yours: it appears at once, marked "posted for this visit", and nothing is sent. On a phone the feed comes first and the totals under it. The pictures are drawn in the theme's greys, never photographed. It's built from Guides, Scroll Area, Toggle, Collapsible, Input, Avatar and Button, with CSS transitions for the entrance. For community apps, neighbourhood boards and any feed with short threads.
FAQ
How do likes work?
Each post has a pressed Toggle with the post's count and yours added: pressing it adds one, pressing again takes it back, and the total in the start column follows. The state is local; connect like to your service to store it.
What does posting a comment do?
It adds your comment to the end of that post's thread, marked "posted for this visit", empties the field and announces it politely. It goes nowhere: it is gone when the page reloads. Connect post to your service to keep it.
Why is the feed in a scroll area?
So the block keeps a fixed height whatever the posts and threads do. The scroll area scrolls with the wheel, touch and the keyboard (Tab into a post and use Page Down, or the arrow keys on a focused post's area), and a thread that opens grows inside it.
What if I post an empty comment?
The Post button is disabled while the field is empty and a submit with nothing in it does nothing, so there is no error to handle.
Related
- Pro
Square Grid Profile Gallery
Hairline gridsA drawing-sharing profile: an avatar, a bio, posts, followers and following, a Follow toggle that adds one, and Posts, Reels and Saved tabs over a three-column square grid that opens one viewer.
- Pro
Stories Gallery
Carousels and slidesA tray of six round highlights for a day-journal app that opens a full-screen viewer with segmented progress bars, tap zones, Previous and Next, a Pause toggle, auto-advance and focus that returns to the highlight.
- Pro
Caption Density Gallery
Rows and bandsA photo essay of five framed pictures in alternating rows, with a Short and Full switch: Short shows each title, Full adds the place, date, credit and a two-sentence story.
- Pro
Rate a Picture Rating Gallery
Select and actSix dishes with a five-star rating each, a seeded average and count that your vote joins, and a Sort group for top rated and most rated.
- Pro
Submission Wall Gallery
Select and actA framed wall of a camera club's six newest entries under Latest and Featured tabs, beside a real form with a handle, a caption and a file drop zone that puts your entry first as pending review for this visit, never posting anything.
- Pro
Reading List Blog
Reading toolsFive saved articles with a bookmark toggle on each: un-saving strikes the row through in place with an Undo link, and the foot reads the derived totals, like 5 saved, 46 min to read.