Tweet

Cards 236

About

Embed Twitter/X posts with custom styling.

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

Code

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

Usage.tsx

import { SiX } from "@icons-pack/react-simple-icons";

function VerifiedBadge() {
  return (
    <svg viewBox="0 0 22 22" className="size-4 text-sky-400 fill-current" aria-label="Verified">
      <path d="M20.396 11c-.018-.646-.215-1.275-.57-1.816-.354-.54-.852-.972-1.438-1.246.223-.607.27-1.264.14-1.897-.131-.634-.437-1.218-.882-1.687-.47-.445-1.053-.75-1.687-.882-.633-.13-1.29-.083-1.897.14-.273-.587-.704-1.086-1.245-1.44S11.647 1.62 11 1.604c-.646.017-1.273.213-1.813.568s-.969.854-1.24 1.44c-.608-.223-1.267-.272-1.902-.14-.635.13-1.22.436-1.69.882-.445.47-.749 1.055-.878 1.688-.13.633-.08 1.29.144 1.896-.587.274-1.087.705-1.443 1.245-.356.54-.555 1.17-.574 1.817.02.647.218 1.276.574 1.817.356.54.856.972 1.443 1.245-.224.606-.274 1.263-.144 1.896.13.634.433 1.218.877 1.688.47.443 1.054.747 1.687.878.633.132 1.29.084 1.897-.136.274.586.705 1.084 1.246 1.439.54.354 1.17.551 1.816.569.647-.016 1.276-.213 1.817-.567s.972-.854 1.245-1.44c.604.239 1.266.296 1.903.164.636-.132 1.22-.447 1.68-.907.46-.46.776-1.044.908-1.681s.075-1.299-.165-1.903c.586-.274 1.084-.705 1.439-1.246.354-.54.551-1.17.569-1.816zM9.662 14.85l-3.429-3.428 1.293-1.302 2.072 2.072 4.4-4.794 1.347 1.246z"/>
    </svg>
  );
}

export default function Demo() {
  return (
    <div className="flex items-center justify-center min-h-[400px] p-8">
      <div className="w-full max-w-[540px] rounded-2xl border border-border bg-background p-5 shadow-sm">
        <div className="flex items-start justify-between">
          <div className="flex items-center gap-3">
            <div className="size-10 rounded-full bg-gradient-to-br from-violet-500 to-indigo-500 flex items-center justify-center text-white font-bold text-sm">AC</div>
            <div>
              <div className="flex items-center gap-1">
                <span className="font-semibold text-sm">Alex Chen</span>
                <VerifiedBadge />
              </div>
              <span className="text-sm text-muted-foreground">@alexchen_dev</span>
            </div>
          </div>
          <SiX className="size-5 text-muted-foreground" />
        </div>
        <p className="mt-4 text-[15px] leading-relaxed">
          Just shipped a new open-source component library built with React, Tailwind CSS, and TypeScript. Every component is accessible, composable, and beautiful by default. ✨
        </p>
        <div className="mt-4 text-sm text-muted-foreground">
          6:30 PM · Mar 4, 2025
        </div>
        <div className="mt-3 flex gap-6 text-sm text-muted-foreground border-t border-border pt-3">
          <span><strong className="text-foreground">142</strong> Replies</span>
          <span><strong className="text-foreground">847</strong> Retweets</span>
          <span><strong className="text-foreground">2.8k</strong> Likes</span>
        </div>
      </div>
    </div>
  )
}