Glass Tweet Card

Component

About

A frosted-glass card that displays a post from X (Twitter) with author, rich text, media and a tappable like/stats row, either from live data via react-tweet or from data you pass in yourself.

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

Code

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

Usage.tsx

import GlassTweetCard from "@/components/ui/glass-tweet-card";

export default function GlassTweetCardDemo() {
  return (
    <div className="flex min-h-[520px] w-full items-center justify-center bg-gradient-to-br from-indigo-500 via-sky-500 to-emerald-400 p-8">
      <GlassTweetCard
        author={{
          name: "Opaline",
          handle: "opaline_ui",
          avatar: "https://cdn.21st.dev/assets/mirror/1a/1a6d6132f2a50df30364a983fa12c7d3d832039c18561bfcd6a86c3f06dc3364.jpg",
          verified: true,
        }}
        content="Liquid glass on the web, finally done right. Real refraction, real specular highlights — no backdrop-filter hacks. #opaline"
        date={new Date()}
        stats={{ replies: 24, reposts: 128, likes: 942, views: 48200 }}
        url="https://x.com/opaline_ui/status/1234567890"
      />
    </div>
  );
}