A portable component contract lets the same story feel at home in every renderer.
SocialPost. A consistently styled social post card or consent-gated provider embed.
- Discovery
- Interactive
- Stability · Experimental
- ::postkit-social-post
Usage.
<SocialPost
href="#component-preview"
service="bluesky"
authorName="Postkit"
authorHandle="@postkit.org"
authorAvatar="/component-preview.svg"
text="A portable component contract lets the same story feel at home in every renderer."
publishedAt="2026-08-28T14:00:00Z"
/>Props. Always in step with the code.
| Prop | Type | Default | Description |
|---|---|---|---|
| hrefRequired | string | None | The original social post URL. |
| provider | string | None | The metadata resolver override. |
| resolution | "live" | "snapshot" | "snapshot-fallback" | None | Whether Postkit resolves the current post, renders frozen metadata, or falls back to live resolution when no snapshot exists. |
| snapshotInfo | "auto" | "visible" | "hidden" | "auto" | Whether snapshot capture provenance is displayed in the rendered card. |
| service | string | None | The social service branding identifier. |
| presentation | "card" | "embed" | "auto" | "auto" | The native-card or provider-embed treatment. |
| branding | "none" | "subtle" | "full" | "subtle" | How strongly the service identity is displayed. |
| activation | "click" | "immediate" | "click" | Whether an interactive embed waits for consent. |
| metadata | JSON string | None | A normalized social post, unfurl result, or versioned Postkit snapshot envelope. |
| authorName | string | None | An author-supplied display-name override. |
| authorHandle | string | None | An author-supplied social handle override. |
| authorAvatar | string | None | An author-supplied avatar URL override. |
| text | string | None | An author-supplied post-text override. |
| publishedAt | string | None | An ISO publication timestamp override. |
| showMetrics | boolean | false | Whether available engagement counts are shown. |
| iframeTitle | string | None | An accessible title for a provider iframe. |
| Appearance | |||
| size | "sm" | "md" | "lg" | "md" | The component density and type scale. |
| variant | "outline" | "subtle" | "plain" | "subtle" | The component visual treatment. |
Every component also takes unstyled and the part-styling props. Change a default for your whole site with defaults in createPostkit. Part styles
Anatomy. Every part is yours to restyle.
Every part
- root
- serviceRow
- serviceBadge
- serviceIcon
- authorRow
- avatar
- author
- authorName
- handle
- timestamp
- content
- media
- image
- metrics
- metric
- quote
- quoteAuthor
- quoteContent
- footer
- originalLink
- snapshotInfo
- snapshotLabel
- snapshotTime
- embedFrame
- embed
- consent
- consentButton
Renderers. One component, everywhere you publish.
- Headless @postkit/reactSupported
- Chakra @postkit/chakraSupported
- Email @postkit/emailAs a link
- Astro @postkit/astroHydrated
- Web components @postkit/elementsPlanned