🦊 fox ui alpha

Social Media Post

llms.txt

Example

flo-bit

@flo-bit.dev

10s

Hello, world!

Usage

		<Post
	data={{
		author: {
			displayName: 'flo-bit',
			handle: 'flo-bit.dev',
			avatar: 'https://github.com/flo-bit.png',
			href: 'https://github.com/flo-bit'
		},
		createdAt: new Date().toISOString()
	}}
	actions={{
		reply: { count: 69, onclick: () => console.log('reply') },
		like: { count: 420, onclick: () => console.log('like') }
	}}
>
	Hello, world!
</Post>

API Reference

Post

A social media post component with avatar, text, embeds, and action buttons.

Property Type Description

data required

object

The post data including author info, text, and timestamp.

embeds

object

Array of embeds to render (images, video, external links, quoted posts). Default: —

showSensitive

boolean

Whether to show the sensitive content overlay on flagged embeds. Default: true

actions

object

Action buttons config (reply, repost, like, bookmark, customActions). Omit to hide actions. Default: —

onclickhandle

function

Callback when an author handle is clicked. Default: —

timestamp

object

Timestamp configuration. Provide href for a link or onclick for a button. Default: —

logo

Snippet

Custom logo snippet displayed in the post header. Default: —

showAvatar

boolean

Whether to show the author avatar. Default: true

compact

boolean

Whether to use a compact layout. Default: false

target

string

The target attribute for all links in the post. Default: '_blank'

children

Snippet

Post content when not using htmlContent. Default: —

class

string

Additional CSS classes to apply. Default: —

ref $bindable

HTMLElement

The underlying DOM element. Default: —

Property

data

embeds

showSensitive

actions

onclickhandle

timestamp

logo

showAvatar

compact

target

children

class

ref