Post Card

A card in the shape of a post on a social network, for quoting a post on a marketing page or a changelog. Everything comes from props: the component never fetches a post and carries no network's logo, so it fits whatever network the post came from.

Only show posts that were really published, by people who agreed to it. The examples below are fictional and say so.

Examples

Text post

A verified author, a hashtag picked out in the brand colour, and every count.

Fictional post, written for this example

Amani Diallo@amani_builds

Shipped dark mode for the planner today. The trick was keeping every grey as a share of the text colour, so one hover works on the page and on a card. Notes in #design-systems if you want them.

With pictures

Two pictures side by side. The time links to the original post, and a count of one reads "1 reply".

Fictional post, written for this example

Lea Moreau@leamoreau

Two mornings on the same ridge, one week apart. @tomas_i guessed the second one first.

Flat landscape of a ridge in early light

The same ridge a week later under a paler sky

Installation

npx shadcn@latest add https://ui.ndekocode.dev/r/motion-post-card.json

Component API

PostCard

Renders an <article>. It has no state, so it renders on the server as well as in the browser. Other article attributes pass through.

Prop	Type	Default	Description
author	PostAuthor		`{ name, handle, avatar?, verified? }`. The handle is written without the `@`.
text	string		The post. Line breaks are kept; mentions, hashtags and links take the brand colour.
date	Date \| string		When it was posted. A string is read as an ISO date.
media	PostMedia[]	[]	Up to four pictures, `{ src, alt }`, laid out in a grid.
counts	PostCounts	{}	`{ replies?, reposts?, likes?, bookmarks?, views? }`. Missing counts are not shown.
href	string		The address of the original post. The time becomes a link to it.
locale	string	'en-US'	The locale of the date and of compact counts such as 12.5K.
timeZone	string	'UTC'	The time zone of the date, fixed so the server and the browser print the same time.
className	string		Classes for the card.

Accessibility and motion

Each count is read in full, with its singular when it is one: "18 replies", "1 reply".
The verified mark is announced as "Verified account".
Every picture needs its own alt text. The avatar is decorative, since the name is right beside it.
The card does not move. When it is a link, only the time is, so the rest of the text can be selected.

Credits

Replaces the tweet card of Magic UI, which fetches a real post. This one takes static props.