Dillion Verma

Tweet Card

Cards 46

About

A card that renders a real tweet with the author's name, handle, avatar, verified badge, rich text, and media (photos or video).

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Tweet Card to your project and fits it to your theme.

Code

How Tweet Card is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

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

/**
 * <TweetCard /> (Server Side Only)
 * <ClientTweetCard /> (Client Side Only)
 */
export default function TweetDemo() {
  return <ClientTweetCard id="1668408059125702661" />;
}

Dependencies

More by Dillion Verma

View all
  • Interactive Hover Button

    Interactive Hover Button

    3.6K
  • Rainbow Button

    Rainbow Button

    2.4K
  • Globe

    Globe

    2.3K
  • Animated Beam

    Animated Beam

    2K
  • Text Reveal

    Text Reveal

    1.7K
  • Confetti

    Confetti

    1.2K
  • Sparkles Text

    Sparkles Text

    1.2K
  • Interactive Icon Cloud

    Interactive Icon Cloud

    1.1K

More in Cards

View all
  • Stats cards with links

    Stats cards with links

    40
  • Course Design Cards

    Course Design Cards

    1.2K
  • Interactive Tech Stack Bento Grid with Hover Effects

    Interactive Tech Stack Bento Grid with Hover Effects

    416
  • Card Studio

    Card Studio

    14
  • Statistics Card 2

    Statistics Card 2

    293
  • Statistics Card 7

    Statistics Card 7

    311
  • Card

    Card

    70
  • The Item one

    The Item one

    3

Explore more

Part of Magic UI — browse the full library on 21st.dev.