X Gradient Card

Cards 360

About

A nice gradient Card displaying a post from X (Twitter)

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

Code

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

Usage.tsx

import { XCard } from "@/components/ui/x-gradient-card";

const XCardDummyData = {
  authorName: "Dorian",
  authorHandle: "dorian_baffier",
  authorImage:
    "https://cdn.21st.dev/assets/localized/48105a02b5748bd2d7c738bc9b4b9ec468fe09c6f69f59d947eed2fdf03dc234.jpg",
  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://cdn.21st.dev/assets/mirror/e9/e941f86e0ca2b1c9eefd47618a92040443f85598470bad47399cee7f259c0756.jpg",
    content: "Awesome.",
    isVerified: true,
    timestamp: "Jan 18",
  },
};

function XCardDemoDefault() {
  return <XCard {...XCardDummyData} />;
}

const XCardDummyDataTwo = {
  authorName: "serafim",
  authorHandle: "serafimcloud",
  authorImage:
    "https://cdn.21st.dev/assets/localized/bc101e2880df0fbc2fc8a6e3528c23ec6762cf97b25ef1ec3e381da80017db95.jpg",
  content: [
    "I spent 70 days full-time curating the ultimate library of @shadcn/ui-like components.",
    "And today, I'm launching it publicly.",
    "Here's what it is:",
    "• 730+ production-ready components from 50+ top design engineers",
    "• Each component is yours to own - just like shadcn/ui",
    "• Install everything with shadcn CLI: code, dependencies, hooks, global css and tailwind config extensions",
    "It's also optimized for AI code editors like @lovable_dev, @stackblitz's bolt. new, and @vercel's @v0, with tailored prompts for effortless integration.",
    "👉 http://21st.dev is live now. Build faster, own your code, and never struggle with UI setup again.",
  ],
  isVerified: true,
  timestamp: "Apr 6",
  reply: {
    authorName: "shadcn",
    authorHandle: "shadcn",
    authorImage:
      "https://cdn.21st.dev/assets/mirror/e9/e941f86e0ca2b1c9eefd47618a92040443f85598470bad47399cee7f259c0756.jpg",
    content: "Great work. CLI support is a nice touch.",
    isVerified: true,
    timestamp: "Jan 9",
  },
};

function XCardDemoTwo() {
  return <XCard {...XCardDummyDataTwo} />;
}

export { XCardDemoDefault, XCardDemoTwo };

export default XCardDemoDefault;