Post Card

Social post card. Pro · Content and social › Social

Installation

npx valyro-cli@latest login
npx valyro-cli@latest add post-card

npm install valyro-ui-pro

import 'valyro-ui-pro/styles.css';
import { PostCard } from 'valyro-ui-pro';

Props

Prop	Type	Default
`author` *	`PostAuthor`		Byline: avatar, name, verified badge and @handle.
`time` *	`DateInput`		Posting time (Date, ISO string or epoch ms), shown as a live relative age like "5m".
`text` *	`string`		Plain-text body, clamped to `maxLines` with a "Show more" button.
`media`	`MediaItem[]`		Attached images, laid out as a MediaGallery mosaic with a fullscreen viewer.
`link`	`PostLinkPreview`		Link preview card under the text; opens in a new tab when it has `href`.
`commentCount`	`number`	`0`	Shown next to the comment button in compact form; hidden at 0.
`repostCount`	`number`	`0`	Server count; it already includes the viewer's repost when `reposted` started true.
`likeCount`	`number`	`0`	Server count; it already includes the viewer's like when `liked` started true.
`liked`	`boolean`		Controlled `liked`; use with `onLikedChange`.
`defaultLiked`	`boolean`	`false`	Initial `liked` when uncontrolled.
`onLikedChange`	`(liked: boolean) => void`		Called with the new `liked` when it changes.
`reposted`	`boolean`		Controlled `reposted`; use with `onRepostedChange`.
`defaultReposted`	`boolean`	`false`	Initial `reposted` when uncontrolled.
`onRepostedChange`	`(reposted: boolean) => void`		Called with the new `reposted` when it changes.
`bookmarked`	`boolean`		Controlled `bookmarked`; use with `onBookmarkedChange`.
`defaultBookmarked`	`boolean`	`false`	Initial `bookmarked` when uncontrolled.
`onBookmarkedChange`	`(bookmarked: boolean) => void`		Called with the new `bookmarked` when it changes.
`onComment`	`() => void`		Called by the comment button.
`onShare`	`() => void`		Called by the share button.
`menuItems`	`PostMenuItem[]`	`[]`	Entries of the "more" menu; the button is hidden when empty.
`maxLines`	`number`	`4`	Lines of text shown before "Show more" (default 4).
`locale`	`string`		Locale for counts and dates (default: the ThemeProvider's, then the browser's).
`labels`	`Partial<PostCardLabels>`		Overrides for the built-in English text; keys left out keep their defaults.

Related components

Comment Thread — Nested comment thread
Profile Card — User profile
Reaction Bar — Likes and reactions
Article Header — Article header: section, headline, lede, authors and date
Byline — Byline: authors, published and updated dates, reading time
Article Figure — Image with caption and photo credit
Pull Quote — Pull quote with attribution
Key Points — “Key points” summary block
Editor Note — Update, correction, disclosure and sponsored-content notes
Article Toc — Article table of contents that tracks the current section
Reading Progress — Reading progress bar
Share Bar — Share: Telegram, VK, X, WhatsApp, email and copy link

Previous: Interactive Quote Deck · Next: Comment Thread · All Content and social