Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Gallery blocks

Pro

Comment Thread Social Feed Gallery Block for React Aria

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.

Framework
UI library

Preview

Preview width

Installation

Part of Pro
Pro unlocks the code and one-line install of every Pro button and text effect, plus the MCP for your AI editor.
Get ProSign in
Have Pro already? Sign in to open it.Opens here as soon as you're Pro.

Overview

A social feed gallery for React with React Aria. 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.

Which keys work?

Tab goes through each post's like button, its comment button and, when the thread is open, the field and Post. Space or Enter presses the buttons; Enter in the field posts. Closed threads are out of the tab order.

How do I use photographs?

Each post's picture is a scene; replace Scene with an <img> that has the same box and keep the description as its alt text.

All 100 gallery blocks