║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║

---

title: Tweet Card date: 2023-10-15 description: A card that displays a tweet with the author's name, handle, and profile picture. author: dillionverma published: true video: https://cdn.magicui.design/tweet-card.mp4

<ComponentPreview name="tweet-card-demo" />

Installation

<Tabs defaultValue="cli"> <TabsList> <TabsTrigger value="cli">CLI</TabsTrigger> <TabsTrigger value="manual">Manual</TabsTrigger> </TabsList> <TabsContent value="cli">

npx shadcn@latest add @magicui/tweet-card

</TabsContent> <TabsContent value="manual"> <Steps>

<Step>Install the dependencies.</Step>

npm install react-tweet

Installation React Server Component (Next.js 13+):

Copy and paste the following code into your project.

<ComponentSource name="tweet-card" />

Installation Client Side

Copy and paste the following code into your project.

<ComponentSource name="client-tweet-card" />

<Step>Update the import paths to match your project setup.</Step>

</Steps> </TabsContent> </Tabs>

Usage

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

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

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

To render on client side:

"use client"

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

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

Examples

Tweet Card With Image Carousel

<ComponentPreview name="tweet-card-images" />

Tweet Card With Meta URL Preview

<ComponentPreview name="tweet-card-meta-preview" />

Props

ClientTweetCard

| Prop | Type | Default | Description | | ---- | -------- | ------- | ------------------------------- | | id | string | - | The id of the tweet to display. |

TweetCard

| Prop | Type | Default | Description | | ---- | -------- | ------- | ------------------------------- | | id | string | - | The id of the tweet to display. |

Credits

This component is built on top of React Tweet.

║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║