Social Links

Component 65

About

Here is animated social links component

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

// demo.tsx
import AnimatedSocialLinks, {
  type Social,
} from '@/components/ui/social-links';

const AnimatedSocialLinksDemo = () => {
  const socials: Social[] = [
    {
      name: 'Instagram',
      image: 'https://cdn.21st.dev/assets/mirror/99/99ff567d984e38805779dd4562c9a52410af37ab99e9594dedd2cbc932dd273b.png',
    },
    {
      name: 'LinkedIn',
      image: 'https://cdn.21st.dev/assets/mirror/5c/5c40fb93330c26d04d51d04bcc6e1b21e69e3c2a3fa5cb5fd64e7e8869313aa7.png',
    },
    {
      name: 'Spotify',
      image: 'https://cdn.21st.dev/assets/mirror/08/086cccbda00af6d3abd4a4d39605520568a58eeb1466f957b2fc3d4bd675e26e.svg',
    },
    {
      name: 'TikTok',
      image: 'https://cdn.21st.dev/assets/mirror/bb/bbc11ec2309f967bbf965ecccaed53f1dd21710f3844bf7fe0e40fa309e49de9.svg',
    },
  ];

  return (
    <main className="relative flex min-h-screen w-full items-center justify-center bg-black px-4 py-10">
      <AnimatedSocialLinks socials={socials} />
    </main>
  );
};

export { AnimatedSocialLinksDemo as DemoOne };