Components / Media

X Post

Component + manager

Embeds an X (formerly Twitter) post given its post ID, handling script loading and rendering. Supports internal and external links with optional previews and QR codes.

Preview

Usage

API reference

Live preview

Interactive example

Loading example…

Usage

Import the component and its manager, then make it your own.

ComponentXPost

Managercreate_x_post_manager

svelte

<script>
  // Import the shared stylesheet once in your application's root layout.
  import "sveltekit-ui/style.css"
  import { XPost, create_x_post_manager } from "sveltekit-ui"

  // The component loads X's widget script to embed this public post.

  const manager = create_x_post_manager({
    post_id: "20",
    is_dark_theme: false,
  })
</script>

<XPost {manager} />

API reference

Configure the manager, call its methods, and read its reactive state.

10 entries in configuration

Property	Type	Default	Description
`id`	`string or null`	`generated unique ID`	A unique string ID for this XPost component. If not provided, a unique ID is generated automatically.
`post_id`	`string`	`null`	The unique identifier of the X (Twitter) post to embed. This is required for rendering the post.
`href`	`string or null`	`null`	The URL associated with the post. If it starts with '/', it's treated as an internal link; otherwise, as an external link.
`display_text`	`string or null`	`null`	The text to display for the link. If not provided, child content can be used instead.
`text_color`	`CSS color or null`	`null`	The color of the link text. If not specified, it inherits the default styling.
`is_show_preview`	`boolean`	`!is_internal_link`	Determines whether to show a popover preview of the post when clicked. Defaults to true for external links and false for internal links.
`is_dark_theme`	`boolean`	`true`	If true, the embedded post uses a dark theme. Otherwise, a light theme is applied.
`height`	`number or null`	`min(40rem, 50vh)`	The height of the popover containing the embedded post, specified in rem. Defaults to 'min(40rem, 50vh)' if not set.
`width`	`number or null`	`clamp(60rem, 80vw, 100%)`	The width of the popover containing the embedded post, specified in rem. Defaults to 'clamp(60rem, 80vw, 100%)' if not set.
`on_goto_external_link`	`function or null`	`null`	Optional callback function that is invoked when an external link is opened. Receives the `href` as an argument.