Four feed posts — text, photo grid, poll and link preview — with optimistic toggles, rolling counts, a shared-layout photo viewer and results that count up.
socialpostfeedlikerepostpollimage gridlink previewtimeline
Text post
text-post.tsxText post with optimistic like, repost and bookmark: icons pop, the like bursts and counts roll.
$npx shadcn@latest add @geturui/social-posts-text-post
| Prop | Type | Default | Description |
|---|---|---|---|
author / handle / time | string | — | Header content. |
verified | boolean | true | Show the verified badge. |
body | string[] | — | Paragraphs of the post. |
replies / reposts / likes / views | number | — | Counts from other people. |
defaultLiked / defaultReposted / defaultBookmarked | boolean | false | Initial viewer state. |
onReply / onChange | () => void / (state) => void | — | Reply handler and toggle state callback. |
className | string | — | Extra classes on the root element. |
Photo grid
image-grid.tsxPhoto post whose drawn grid tiles expand into a viewer with a shared-layout morph, arrow paging and Escape to close.
$npx shadcn@latest add @geturui/social-posts-image-grid
| Prop | Type | Default | Description |
|---|---|---|---|
author / place / time / caption | string | — | Post content. |
images | PostImage[] | — | { scene, alt } per tile, up to four; swap Scene for your <img> in real use. |
likes / comments | number | — | Counts. |
onLikeChange | (liked: boolean) => void | — | Like toggle handler. |
className | string | — | Extra classes on the root element. |
Poll
poll.tsxPoll post where voting grows the result bars and counts percentages up, with your choice marked and undo.
$npx shadcn@latest add @geturui/social-posts-poll
| Prop | Type | Default | Description |
|---|---|---|---|
author / handle / time | string | — | Header content. |
question | string | — | Poll question. |
options | PollOption[] | — | { id, label, votes } per option. |
remaining | string | "2 days left" | Time-left label. |
defaultVote / onVote | string | null / (id: string | null) => void | — | Existing vote and change handler (null on undo). |
className | string | — | Extra classes on the root element. |
Link preview
link-preview.tsxPost with an expandable body and a rich link preview whose drawn image drifts on hover, plus like and copy link.
$npx shadcn@latest add @geturui/social-posts-link-preview
| Prop | Type | Default | Description |
|---|---|---|---|
author / role / time | string | — | Header content. |
text / more | string | — | Opening text and the part revealed by Show more. |
link | LinkPreview | — | { url, domain, title, description, kicker? } for the preview. |
likes / comments | number | — | Counts. |
onLikeChange | (liked: boolean) => void | — | Like toggle handler. |
className | string | — | Extra classes on the root element. |
Install the whole set
Installs every social posts variant at once. Each section above has its own command for a single variant.
$npx shadcn@latest add @geturui/social-posts
Accessibility
- Like, repost and bookmark are toggle buttons with aria-pressed and counts in their labels.
- The photo viewer is a labelled dialog: focus moves to Close, arrows page, Escape closes and focus returns to the tile.
- Poll results are announced in a live region; bursts, morphs and count-ups are reduced to fades.