Tweet Card

Cards 27

About

A polished tweet-style card built with React, Framer Motion, and Tailwind, featuring interactive actions, hover-based lighting, and support for avatars, rich media, and live-like stats.

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 TweetCard, { type TweetProps } from "@/components/ui/tweet-card";

const sampleTweets: TweetProps[] = [
  {
    author: {
      name: "Dan Abramov",
      handle: "dan_abramov",
      avatarSrc: "https://cdn.21st.dev/assets/mirror/41/4169dd112c275f0d2d78816b35ddcd400c2012af3b9cfcb8de795e6addc57353.jpg",
      isVerified: true,
    },
    content: "If you're not embarrassed by the first version of your product, you’ve launched too late.",
    timestamp: "5h",
    stats: {
      replies: 45,
      retweets: 120,
      likes: 890,
      views: "45K",
    },
    tags: ["startup", "coding"],
  },
  {
    author: {
      name: "Design Daily",
      handle: "designdaily",
      avatarSrc: "https://cdn.21st.dev/assets/mirror/88/88f46464ebc33765364fdfcbf86a84f1c161e74edbb4d30b61d028c2877ca5f6.jpg",
      isVerified: false,
    },
    content: "Minimalism isn't about removing things you love. It's about removing the things that distract you from the things you love.",
    timestamp: "Oct 24",
    stats: {
      replies: 12,
      retweets: 89,
      likes: 432,
      views: "12K",
    },
    mediaUrl: "https://cdn.21st.dev/assets/mirror/4a/4ac0b39f88a1410fe7941f421b33427d99f7ca15efcf3515f5af7bbf8faf9ef3.jpg",
  },
];

export default function DemoOne() {
  return (<main className="min-h-screen w-full bg-gray-50 dark:bg-neutral-950 flex flex-col items-center justify-center py-12 px-4 gap-8 transition-colors duration-300">
      
      <div className="text-center space-y-2 mb-4">
        <h1 className="text-3xl font-bold tracking-tight text-gray-900 dark:text-gray-100">
          Tweet Cards
        </h1>
        <p className="text-gray-500 dark:text-gray-400">
          Interactive cards with Framer Motion spotlight effects.
        </p>
      </div>

      <div className="flex flex-col gap-6 w-full items-center">
        {sampleTweets.map((tweet, index) => (
          <TweetCard key={index} {...tweet} />
        ))}
      </div>

    </main>);
}