Social Card

Cards

About

social card with icons

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

Code

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

Usage.tsx


import {Component} from "@/components/ui/social-card"
import { Github, Twitter } from "lucide-react";

export default function DemoOne() {
  return <div className="flex flex-row flex-wrap items-center justify-center gap-10" >
    <Component
        name="GitHub"
  gradient = "bg-gradient-to-br from-gray-800 to-gray-900"
  textColor = "text-white"
  bgIconColor = "bg-black"
  largeLogo = {< Github className = "w-full h-full text-white" />}
smallLogo = {< Github className = "text-white" />}
onClick = {() => { }}
/>

  <Component
name = "Twitter"
gradient = "bg-gradient-to-br from-blue-400 to-blue-600"
textColor = "text-white"
bgIconColor = "bg-blue-500"
largeLogo = {< Twitter className = "w-full h-full text-white" />}
smallLogo = {< Twitter className = "text-white" />}
onClick = {() => { }}
/>
  < /div>;
}