X Card (Twitter)

Previous

Embed X/Twitter posts with rich styling and theme integration. Perfect for showcasing tweets in documentation, blogs, and social content.

Installation

pnpm dlx shadcn@latest add https://deltacomponents.dev/r/x-card.json

Usage

"use client"
 
import { XCard } from "@/components/ui/x-card"
 
export default function Example() {
  return (
    <XCard
      id="1825208781827080599"
      size="medium"
      caption="Optional caption describing the tweet content"
    />
  )
}

Examples

Basic Tweet

Different Sizes

"use client"
 
// Small size
<XCard
  id="1825208781827080599"
  size="small"
  caption="Small tweet embed"
/>
 
// Medium size (default)
<XCard
  id="1825208781827080599"
  size="medium"
  caption="Medium tweet embed"
/>
 
// Large size
<XCard
  id="1825208781827080599"
  size="large"
  caption="Large tweet embed"
/>

With Caption

"use client"
 
<XCard
  id="1825208781827080599"
  caption="A tweet showcasing modern web development practices"
/>

Custom Styling

"use client"
 
<XCard
  id="1825208781827080599"
  size="small"
  className="mx-auto border-2 border-primary rounded-lg p-4"
/>

API Reference

XCard Props

PropTypeDefaultDescription
idstring-Required. The tweet ID from the X/Twitter URL. Extract from tweet URLs like https://x.com/user/status/[ID]
size"small" | "medium" | "large""medium"Controls the display size of the tweet embed. Small (90% scale), medium (default), large (110% scale)
captionReactNode-Optional caption content displayed below the tweet. Accepts any React element or string
classNamestring-Additional CSS classes applied to the container wrapper for custom styling

Size Variants

  • Small ("small"): 90% scale with max-w-sm container width
  • Medium ("medium"): Default size with max-w-xl container width
  • Large ("large"): 110% scale with max-w-2xl container width

Features

  • Theme Integration: Automatically adapts to your site's light/dark theme
  • Rich Embeds: Full support for X/Twitter's rich embed features
  • Loading States: Built-in skeleton loading and error states
  • Responsive: Adapts to different screen sizes and containers
  • Accessible: Proper semantic markup and screen reader support
  • Performance: Optimized loading with Suspense boundaries

Getting Tweet IDs

To get a tweet ID:

  1. Go to the tweet on X/Twitter
  2. Copy the URL (e.g., https://x.com/user/status/1825208781827080599)
  3. The ID is the number at the end: 1825208781827080599

Dependencies

This component requires the react-tweet package:

pnpm add react-tweet

Styling

The component includes comprehensive CSS custom properties for theme integration:

  • Inherits font family and colors from your design system
  • Adapts border and background colors to match your theme
  • Supports both light and dark modes automatically
  • Customizable link styling that matches your site's link treatment