shadcn.io is not affiliated with official shadcn/ui
Social Post Style Testimonials Block for Ark UI
Six customer testimonials styled as social posts in cells with overshooting lines: initials avatar, verified tick, handle and age, the post and compact reply, share and like counts, with a Shine Button in the header.
Installation
Overview
Customer love in the format developers trust most: someone posting on their own time. A compact header says what the posts are about (Tarnwick, a made-up component kit) and holds the one Shine Button, "Join the conversation". Below it six posts sit in cells with solid hairlines that run a little past their corners, with a + mark on each cell's top corner, three columns on desktop and two on a tablet. Each has the author's initials avatar, their name with a verified tick where it applies, a handle and how long ago they posted, the post itself, and three counts for replies, shares and likes written the compact way, like 1.3K. On a phone the first three show and a ghost button reveals the other three. The cells fade up one after another on load. It's built from Avatar, Button, Shine Button and Guides with lucide icons, CSS only and your theme's tokens. For developer-tool landing pages, where public endorsements carry weight.
FAQ
How do I change the posts and numbers?
Edit POSTS at the top of the file (six by default; FIRST sets how many show on a phone before the button): each has the post text, the author's name, handle, initials and verified flag, a relative time, and integer replies, shares and likes. The counts are formatted by one Intl.NumberFormat fixed to US English in compact form, so 1284 shows as 1.3K and the same on the server and in the browser. Use numbers that are true: this block shows them as social proof.
What does the verified tick mean?
It is a flag in the data and nothing verifies it. Turn it on only for authors whose account you have confirmed is theirs. The tick is drawn from your theme's foreground colour, so it works in any theme, and a screen reader hears "Verified account" after the name.
Can I use real posts from a social network?
You can, with permission and under that network's display rules. Replace the data with your own, keep the author's real handle and the real post text, and do not add a network's logo or name unless its guidelines ask for it. The block has no logo of its own on purpose, so it stays neutral.
How do screen readers read a post?
Each post is a figure: the author's name, a verified note, the handle and the age form its caption, and the post is a blockquote. The counts are a small list that reads, for example, "62 replies, 247 shares, 1.3K likes". The avatar and the icons are hidden because the words are right there.
How does it fit a phone?
It is three columns from lg, two from sm and one below. On a phone only the first three posts show, so the section stays short: the "Show 3 more posts" button reveals the rest, announces whether the list is expanded and keeps its place. A long name or handle is cut with an ellipsis in its own line, and the post wraps in full, down to 320 pixels.
What about reduced motion?
The header and the cells fade up once on load using CSS transitions, 70 milliseconds apart. With reduced motion everything is there from the first paint.
How do I point the button at my page?
Change the href of the call to action in the header. Say where it goes in its label, such as "Join the conversation". It's a Shine Button, the one primary control in the block, and a diagonal band of light crosses it once on hover or focus (it fades in instead with reduced motion).
The link renders its a through asChild, so the button's styles land on the link.