Social Card (tweet)

Static embed card for a social post (testimonials, launch walls). Renders data you pass; it doesn't fetch. The date links out to `url` when given. Numbers follow the React Aria locale.

Import

import { SocialEmbed } from '@marbleui/ui'

Props

<SocialEmbed>

Prop	Type	Default	Description
post *required	`SocialPost`	`—`
className	`string`	`—`

Usage notes

Static card for a social post on testimonial or launch walls. It renders the data you pass and loads nothing: no third-party script, iframe or fetch.

<SocialEmbed post={{
  author: 'Dana Reyes', handle: 'danareyes', verified: true,
  date: new Date('2026-10-21T09:30:00Z'), url: 'https://example.com/danareyes/1840',
  text: 'The accessibility audit came back clean for the first time.',
  replies: 24, reposts: 112, likes: 1840,
}} />

The author always shows as an initials Avatar; there is no photo field. media takes any node, shown under the text.
Counts are compact (“1.8K”) with the exact number for screen readers, formatted in the React Aria locale. Omit replies, reposts or likes to hide that stat.
The only link is the relative timestamp, pointing to url. Without url the timestamp is plain text. The verified badge is an image named “Verified”.
source adds a small text label at the top right, such as the network’s name.

Example source · show

import { SocialEmbed } from './social-embed'

const post = { author: 'Dana Reyes', handle: 'danareyes', verified: true, date: new Date(Date.now() - 3.6e6 * 5), text: 'Swapped three UI kits for Marble UI this sprint.\n\nThe accessibility audit came back clean for the first time. Keyboard nav in the data grid just works.', replies: 24, reposts: 112, likes: 1840 }
export const styles = {
  Text: () => <SocialEmbed post={post} className="w-[26rem]" />,
  'With media': () => <SocialEmbed className="w-[26rem]" post={{ ...post, verified: false, author: 'Leo Martins', handle: 'leo', text: 'New dark-mode charts landed 🎉', media: <div className="aspect-video bg-[linear-gradient(135deg_in_oklch,var(--chart-1),var(--chart-6))]" />, likes: 312, reposts: 40, replies: 8 }} />,
}

Source: packages/ui/src/social-embed/social-embed.tsx

Catalog