Integrations Card

Heroes

About

Animated Integrations Card This component showcases a set of integrations with a visually appealing layout and smooth animations. It's designed to be reusable and customizable through props.

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

Code

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

Usage.tsx

// demo.tsx
import { AnimatedIntegrationsCard } from "@/components/ui/integrations-card";
import { Blocks } from "lucide-react"; // Example icon

const IntegrationsDemo = () => {
  const integrations = [
    {
      name: "Dropbox",
      icon: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABwAAAAcCAMAAABF0y+mAAAAP1BMVEUAYf4AYf4HZf4AYf4AYf4AXP8AV/8ib/0AUf9Phvzg6vN0oPrV4vQ8ffyOsfj//vK+0vX49vLx9fJkl/qhwPcy5G+GAAAABXRSTlPl8vv/8e4/M/sAAAEHSURBVHgBfZMHEsMwCARlExCgHun/bw0p7uMwjWFVbl2cm27LuRlua3aPe/hw0z2cVoi0zAjPkGbP+F3kgQ+QWFQD2ZApaExMGySfi1VNxKm+u+xpgSixlNZaefb+tMa6KLjCajNjUSS2T1dXCATB9qodxj5rKTEAbYEQ07DFaB1IHYlwr8KYx8cF2Y+BvFOxkGrHdmYzeXeJt7R+vNO+XVL9dsOvabt+BVoIPxXttB6bzKW0Kt5LbcVM0i4tY4iaLWgVyGomjBs0F5GPouZZzOn0yqjH9qnY6fo+u36DascLBMb8tCwZGK4QkEWjmP4BrsV+tm03EIjgAP9+mv8+6svv8Fhrci8jzxLVkbdj1wAAAABJRU5ErkJggg==",
    },
    {
      name: "Slack",
      icon: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAfCAMAAACxiD++AAAAllBMVEVHcEw2xfE2xfA2xfA1xfA2yPItt30utn0utn01xfA1xfA1xfA1xfEttn0utn01xvE2wsUutn02xfEutn03xfAstX0stn02xfDhSUzgHVngHVrgHVrhHVngHVrgHVjssi3ssi7ssi7rsi3gHlrgHlrgHlrgHVrfHljssi3ssi7tsi7gHlrssi3gHFrssi7rsC7rsS/tsS0S3plWAAAAMnRSTlMAc+D/wjlU4P9oSNaHlLWYCM2jriMqevYIUaWzQoUqOJCmTez/Y9QbyP/ndLKM1Shdc67V0pYAAAE1SURBVHgBdI8DEgRBEARrNbbu/v/RtZGBVg4aB1XdtN0YCWWU4AlvRmoxzUdeDNlMKGg2YfCgngXrzCx4PAirEL+E1E5C+BaQRFVV4lVwGwDOf3Dr/rJekaE7CTlST7b9N9qETchzkrf1NtQulDW65oLF9kk9Rwq05/mPrwO9xgiI+jQPCTlOF2Q3CzRjNJTdqBKAXHTJcETrKX7x/x/5UAhZGEAMAgEsY1RwqPv+w73U+xocgl2cJEkqQCSJVIA2dsM4IPbhQYbIH01SoMvqoNaQh0VI57bBVGdaorAKfm472otQbyeIaBPsRSghDvPdu6D7s6CBOM1lwS4wmH6lbDU7m7BFYONdGI0x0/BN2H7RDn+EyvDGVSh5I58Fucah5Y05HrnC1U9h4B2R54kCXFuf3ngHXY83KaRzhbUAAAAASUVORK5CYII=",
    },
    {
      name: "Main",
      icon: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABwAAAAcCAMAAABF0y+mAAAAY1BMVEUVFBoAAAAAAAsAAAXGxsfc3Nxramzi4uOEhIUJBxA2NTn////l5eWxsLKbm5yXl5ljY2U8PD/Q0NFbWl3y8vK4uLkaGR9GRUihoaIAAAhxcXO+vr99fX8nJyv7+/uQkJHW1td4h7FUAAAAsElEQVR4Ac3RBQKDMBAEQBZNurg7/P+VzdV7LwDiE4933Q8AJPcBBNrCKIzgLE7CyPyrvTGNCOnEjDn+EAXzJ5IlNUasEod+ybrR6LGFIDKaUiEMuye27GONNWNBOzCBRpAQxMhR4zQzfGLKSiMWroHgxha+xp2TJ3gw0+g3PCGIk42vEBmPJ3KHp7HlZgVjLhrd4VJXQ8qF86RwWqNDcKnDE65v8/dkE/D73BZiV/zuQNAJugNKvQoAAAAASUVORK5CYII=",
    },
    {
      name: "Shopify",
      icon: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAAAAABWESUoAAAA3ElEQVR4Ac2SGQDFMBBE1ylOcYpTner0neK0TnGpU53iFKc6xWl+p+f25D7InZ295Cv0mGjFUOzWDVVVa/WykaBiaBBFfsiyory3JASRjs8mInqxUGRw47CIBIy7Ew0Sh0nED4OXCwkNh8h7GrrgCkVK9a7w6Q2BjoVa6Oo9EZEDVJ7I1M4UeMDXzIEhvoukFxNMaP8o4gpon1l9qnqc7DcPIgpd7Ce0t/fJVO0q0qIsVeuY1XwNYK1gwm8J2GAqvHRF5mD7BcG0Rl6yegjw0BqdakE8Bni0RyjyDf4Y1Y0n0wNT4wAAAABJRU5ErkJggg==",
    },
    {
      name: "Salesforce",
      icon: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABwAAAAcBAMAAACAI8KnAAAAJ1BMVEXN6PcHndwAndwAndwCndwAndwAndwAndwAndwAndwAndwAndwAndxI7+MwAAAADXRSTlMBDzdMHaHm0YZ3/79m9L0GfgAAAJhJREFUeAFjoAwwKpsIMAjCuapp6S3OoZMEIDzmqlWrsnetWnaQESzgvQoCMqbGKAK5ZqvgoAYofwrBXXYAhbtqI4riVYsZWKKQuCsZOFahcMVWoSj2QuamoHInMIgj8TIcGDjhnPKtRxgYWNpgTjqkAvKC0IkqICe7LFgA6mErILfFBcZj4ClbleqAFDw6nYYowSVAViADABQkfCeMXxKLAAAAAElFTkSuQmCC",
    },
  ];

  const title = (
    <>
      Connect with all tools for{" "}
      <span
        className="bg-gradient-to-r from-pink-500 to-violet-500 bg-clip-text text-transparent"
      >
        high experience
      </span>
    </>
  );

  return (
    <div className="flex min-h-screen w-full items-center justify-center bg-background p-4">
      <AnimatedIntegrationsCard
        integrations={integrations}
        title={title}
        description="Explore more links and enjoy Rainbow as soon as possible"
        mainActionLabel="Learn More"
        statusLabel="CONNECTED"
        topIcon={<Blocks className="h-6 w-6 text-muted-foreground" />}
      />
    </div>
  );
};

export default IntegrationsDemo;