Tweet Card

npx shadcn@latest add @kokonutui/tweet-card

import TweetCard from "@/components/kokonutui/tweet-card";

export default function Example() {
  return (
    <TweetCard
      authorName="Your Name"
      authorHandle="yourhandle"
      authorImage="https://your-image.jpg"
      content={[
        "Your tweet content here",
        "Line 2 of content",
        "Line 3 of content"
      ]}
      isVerified={true}
      timestamp="Jan 18, 2025"
    />
  );
}

interface ReplyProps {
  authorName: string;
  authorHandle: string;
  authorImage: string;
  content: string;           // Single string for reply
  isVerified?: boolean;
  timestamp: string;         // Short format, e.g., "Jan 18"
}

<TweetCard
  authorName="Dorian"
  authorHandle="dorianbaffier"
  authorImage="https://pbs.twimg.com/profile_images/..."
  content={[
    "All components from KokonutUI can now be open in @v0 🎉",
    "1. Click on 'Open in V0'",
    "2. Customize with prompts",
    "3. Deploy to your app"
  ]}
  isVerified={true}
  timestamp="Jan 18, 2025"
  reply={{
    authorName: "shadcn",
    authorHandle: "shadcn",
    authorImage: "https://pbs.twimg.com/profile_images/...",
    content: "Awesome.",
    isVerified: true,
    timestamp: "Jan 18"
  }}
/>

// Glassmorphism layers
bg-white/5 dark:bg-black/90
backdrop-blur-xl backdrop-saturate-[180%]
border border-black/10 dark:border-white/10
shadow-[0_8px_16px_rgb(0_0_0_/_0.15)]

// Gradient overlay
bg-linear-to-br from-black/[0.05] to-transparent
dark:from-white/[0.08] dark:to-transparent
backdrop-blur-md backdrop-saturate-150

before:opacity-0 hover:before:opacity-100
before:bg-linear-to-br before:from-black/[0.02]

<TweetCard
  // ... other props
  // Simply omit the reply prop
/>

<TweetCard
  content={["Single tweet content"]}
  // ... other props
/>

<Link href="https://x.com/your-handle/status/your-id" target="_blank">