Chat share cardPro

A social image of an answer or a conversation sized for X and LinkedIn, with a PNG export painted on a canvas and no library.

Markdown

On this page

ProAn answer as a 1200 x 675 post image on one 72 px column, exported to PNG on a canvas with no library.

Installation

$ pnpm dlx shadcn@latest add @chatcn-pro/chat-share-card

Usage

tsx

import { ChatShareCard, exportChatShareCard } from "@/components/ui/chatcn/pro/chat-share-card"

<ChatShareCard
  ref={ref}
  brand="Your product"
  title="Why did checkout get slower?"
  excerpt={answer}
  model="Research agent"
  date={new Date()}
/>

const png = await exportChatShareCard(ref.current)

The question is the headline and the answer sits on a sheet of your product's surface that runs off the bottom edge, the way a launch post crops a screenshot. Everything is a solid fill, a hairline or text, so the export matches it exactly. The export is not a screenshot. It walks the card, paints boxes and inline SVG, and draws every word at the position the browser laid it out, so line breaks and fonts match the card exactly. Long text is trimmed to whole words with an ellipsis, so what you see is what you post.

Examples

Conversation, LinkedIn, dark and long text

ProA conversation at the LinkedIn size, a short dark answer whose sheet slides down to hug it, and long text trimmed to whole words.

Props

Prop	Type	Notes
`variant`	`"answer" \| "conversation"`	Headline and answer, or bubbles
`title`, `excerpt`	`string`	Answer variant. Both trim to fit
`messages`	`{ role, text }[]`	Conversation variant. The last one trims
`model`, `modelMark`	`string`, `ReactNode`	The agent, on the sheet's first line
`date`	`Date \| string`	Formats as 26 Oct 2026
`brand`	`ReactNode`	Your mark and name
`url`	`string`	A short link, at the end of the sheet's first line
`size`	`"x" \| "linkedin"`	1200 x 675 or 1200 x 627
`theme`	`"auto" \| "dark"`	Dark on any page
`width`	`number`	Displayed width. Default 600

exportChatShareCard

exportChatShareCard(element, { scale = 2, type }) resolves with a PNG blob at the real size times scale. downloadBlob(blob, name) from @/lib/chatcn-pro-share-card saves it. Images on other origins without CORS headers are skipped rather than breaking the export.

Keyboard

The card is static content. Your export button carries the keyboard behavior.

Accessibility

The card is real text, so screen readers read the question and the answer.
When you post the PNG, use the title and excerpt as its alt text.

Motion

None. The card is a still image by design.