Components
Tweet Card

Tweet Card

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

Loading...

Prerequisites

npm install tailwindcss clsx tailwind-merge react-tweet

Copy and paste the following code into your project.

// lib/utils.ts
import clsx, { ClassValue } from "clsx";
import { twMerge } from "tailwind-merge";
 
export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs));
}

Installation

Server Side (Next.js 13):

Copy and paste the following code into your project.

Client Side

Copy and paste the following code into your project.

Update the import paths to match your project setup.

Usage

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

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

To render on client side:

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

Examples

Loading...

Tweet Card With Meta URL Preview

Loading...

Props

ClientTweetCard

PropTypeDescription
ididThe id of the tweet to display.

TweetCard

PropTypeDescription
ididThe id of the tweet to display.

Credits

This component is built on top of React Tweet.