Introducing Magic UI Pro - 50+ blocks and templates to build beautiful landing pages in minutes.

Command Palette

Search for a command to run...

Docs
Tweet Card

Tweet Card

A card that displays a tweet with the author's name, handle, and profile picture.

Installation

Usage

To render on server side using RSC (Next.js 13):

import { TweetCard } from "@/components/magicui/tweet-card";
 
export default async function App() {
  return <TweetCard id="1441032681968212480" />;
}

To render on client side:

"use client";
 
import { ClientTweetCard } from "@/components/magicui/client-tweet-card";
 
export default function App() {
  return <ClientTweetCard id="1441032681968212480" />;
}

Examples

Tweet Card With Meta URL Preview

Props

ClientTweetCard

PropTypeDefaultDescription
idstring-The id of the tweet to display.

TweetCard

PropTypeDefaultDescription
idstring-The id of the tweet to display.

Credits

This component is built on top of React Tweet.