Social Links

Component 455

About

Link with image appearing on hover. Inspired by @alexanderolssen and @ln_dev7

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

Code

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

Usage.tsx

import { SocialLinks } from "@/components/ui/social-links";

const socials = [
  {
    name: "Instagram",
    image:
      "https://cdn.21st.dev/assets/localized/6486882af723b976a81fed3662a2950cb06a250d8978efdb5e3f0ac3590b5fae.png",
  },
  {
    name: "LinkedIn",
    image:
      "https://cdn.21st.dev/assets/localized/cad748af0ff182f9094bae80608cb5468285a8c50deb710dc27c646f5a796f33.png",
  },
  {
    name: "Spotify",
    image:
      "https://cdn.21st.dev/assets/localized/8467017d55ce030ab2d311a7ed28f0b98dafe8ba01ba0e1fe1447bf238d9f825.png",
  },
  {
    name: "TikTok",
    image:
      "https://cdn.21st.dev/assets/localized/c6c3f1ab1b7934ee11b9b55ad929cafeed3786ba78cbc4a2853de7e617c7bf01.png",
  },
];

function SocialLinksDemo() {
  return (
    <main className="relative flex min-h-screen w-full items-start justify-center px-4 py-10 md:items-center">
      <SocialLinks socials={socials} />
    </main>
  );
}

function SocialLinksCustomGap() {
  return (
    <main className="relative flex min-h-screen w-full items-start justify-center px-4 py-10 md:items-center">
      <SocialLinks socials={socials.slice(0, 2)} className="gap-4" />
    </main>
  );
}

export { SocialLinksDemo, SocialLinksCustomGap };

export default SocialLinksDemo;