social-post

API

The vanilla core (social-post.ts, zero dependencies). The React wrapper (social-post-react.tsx) exposes the same options as props; social-post-shadcn is a separate registry item with the card rebuilt from Tailwind tokens, your app's <Avatar>, and lucide icons — self-contained in one file.

import { createSocialPost } from './social-post'

const post = createSocialPost({
  name: 'Ada Lovelace',
  handle: 'adalovelace',          // '@' is prepended for you
  verified: true,
  content: 'Notes are up — thanks @babbage! https://example.com/notes #computing',
  avatarUrl: 'https://…/ada.jpg', // optional; silhouette fallback if missing or dead
  images: ['https://…/1.jpg', 'https://…/2.jpg'],   // 0–4, fixed 16:9 frame
  date: 'Mar 3, 2026',            // optional, preformatted — never parsed
  link: 'https://example.com/adalovelace/status/1',
})
host.appendChild(post.element)

post.setState({ verified: false })   // patch any field live

createSocialPost(options) → SocialPost

Instance: element, getState(), setState(patch), destroy(). setState applies the keys present in the patch (key: undefined clears an optional field); the avatar <img> and the media grid are only rebuilt when their values actually changed, so toggling verified never re-fetches images. There's deliberately no engine/subscribe layer — the card has no navigation or timing state, only display data.

Customizing

Two layers: the variant prop picks the built-in look, and the --social-post-* CSS variables override any single part — they win over both variants, from the card itself or any ancestor.

// The built-in filled gray card — borderless, muted fill
createSocialPost({ ...post, variant: 'filled' })   // vanilla
<SocialPost variant="filled" … />                  // react wrapper and shadcn-native

/* Any custom background (or accent, radius, …) via the escape hatches.
   Scope them to a wrapper — or set them globally — and every card follows: */
.press-quotes {
  --social-post-bg: #f4f4f5;        /* the fill (dark mode: use light-dark()) */
  --social-post-accent: #0e7490;    /* mention/hashtag/URL tint */
  --social-post-radius: 1rem;       /* corners */
}

/* shadcn-native only: className merges last, so call-site utilities work too */
<SocialPost className="border-transparent bg-muted" … />

Entities

Detection is purely lexical, and honest about its limits: only explicit http(s):// URLs (no bare domains or www.); mentions accept the fediverse form @user@instance.tld; hashtags accept unicode (#café, #日本語). Sentence punctuation trailing a URL is trimmed — including an unbalanced closing paren, while wiki_(disambiguation) keeps its own. Entities glued together without whitespace (@jane#tag) stay merged. Everything renders via textContent — content is never interpreted as HTML. The split function is exported (splitContentEntities) if you want to render segments yourself.

Theming

Consumes shadcn theme tokens when present (--card, --card-foreground, --border, --foreground, --muted, --muted-foreground, --primary, --ring, --radius) with zinc light-dark() fallbacks — standalone it still reads correctly in both themes. Override independently via --social-post-bg/-fg, --social-post-border, --social-post-radius, --social-post-name, --social-post-handle, --social-post-verified, --social-post-avatar-bg/-fg, --social-post-accent (the entity tint — defaults to --primary, so it tracks your app's emphasis color; entities also carry a slight weight bump so they still read in themes where primary sits near foreground), --social-post-media-radius, --social-post-media-gap, --social-post-date, --social-post-link/-hover, --social-post-ring. The filled variant swaps the default fill to --muted and turns the border transparent — --social-post-bg overrides the fill for either variant.