Tweet Card

​

Installation

npx shadcn@latest add @magicui/tweet-card
# Also install react-tweet
npm install react-tweet

​

Usage

​

Server Component (Next.js 13+)

import { TweetCard } from "@/components/ui/tweet-card"

export default async function Example() {
  return <TweetCard id="1441032681968212480" />
}

​

Client Component

"use client"

import { ClientTweetCard } from "@/components/ui/client-tweet-card"

export default function Example() {
  return <ClientTweetCard id="1441032681968212480" />
}

​

Props

​

TweetCard (Server)

​

ClientTweetCard (Client)

​

Features

• Server-side and client-side rendering support
• Displays tweet text with proper entity formatting
• Shows author information and verification badges
• Supports images, videos, and carousels
• URL preview cards
• Responsive design
• Dark mode compatible

​

Examples

​

With Image Carousel

​

With URL Preview

​

Notes

• Built on top of React Tweet
• Automatically handles tweet loading and errors
• Shows skeleton loader while fetching
• Displays “Tweet not found” for invalid IDs

​

Credits