Getting Started
Components
Device Mocks
Special Effects
Animations
Text Animations
Buttons
import { ClientTweetCard } from "@/registry/magicui/client-tweet-card";
/**
* <TweetCard /> (Server Side Only)
* <ClientTweetCard /> (Client Side Only)
*/
export function TweetDemo() {
return <ClientTweetCard id="1668408059125702661" />;
}
Installation
pnpm dlx shadcn@latest add @magicui/tweet-card
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 Image Carousel
import { ClientTweetCard } from "@/registry/magicui/client-tweet-card";
export function TweetImages() {
return <ClientTweetCard id="1678577280489234432" className="shadow-2xl" />;
}
Tweet Card With Meta URL Preview
import { ClientTweetCard } from "@/registry/magicui/client-tweet-card";
export function TweetMetaPreview() {
return <ClientTweetCard id="1675849118445436929" className="shadow-2xl" />;
}
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.
On This Page
InstallationInstallation React Server Component (Next.js 13+):Installation Client SideUsageExamplesTweet Card With Image CarouselTweet Card With Meta URL PreviewPropsClientTweetCardTweetCardCreditsLimited Time Offer
Ship Faster with Magic UI ProMagic UI Pro
Stop building from scratch.
Get 8 production-ready templates and 50+ premium components that your users will love.
✓
Next.js 15 + TypeScript ready✓
Copy, paste, customize in minutes✓
Save 100+ hours of development