Blogpost 16 - Comments with voting and sort tabs

Pro

A comment thread with upvote and downvote arrows beside each comment, Top and Newest sort tabs, an author badge, collapsible replies, and a bordered composer.

Shadcn Blogpost 16 block

Component data

ID
blogpost16
Access
pro
Created
Oct 4, 2026
Type
block
Libraries
Radix UI, Base UI, React Aria

Blogpost 16 block design & features

Blogpost16 is a discussion thread for the bottom of an article, built with shadcn/ui Avatar, Badge, Button, Tabs, and Textarea components. A centered column holds a heading with the comment count, a pair of Top and Newest sort tabs, and a bordered composer showing the reader's name and avatar. Each comment has a vote column on the left with up and down arrows around the score, followed by a small avatar, the name, an author badge for the writer's own replies, the time, the comment, and reply and hide replies buttons.

Styling is compact and forum-like. The vote column gives the thread a strong left edge, replies nest inside their parent without extra rules, and the composer is one outlined box that lights up with a focus ring when you type. Voting colors the arrow and moves the score, the Top tab reorders comments by score as votes change, and posting a comment switches to Newest so it appears first.

The voting and sorting make it feel closer to a developer community thread than a blog comment box. Complexity is moderate. All state is local for demonstration, and real use needs a comments service that stores votes.

Replies can be collapsed per comment, which keeps long threads short on phones.