Components
Loading preview...
Here is animated social links component
npx shadcn@latest add https://21st.dev/r/ln-dev7/social-links// demo.tsx
import AnimatedSocialLinks, {
type Social,
} from '@/components/ui/social-links';
const AnimatedSocialLinksDemo = () => {
const socials: Social[] = [
{
name: 'Instagram',
image: 'https://upload.wikimedia.org/wikipedia/commons/a/a5/Instagram_icon.png',
},
{
name: 'LinkedIn',
image: 'https://upload.wikimedia.org/wikipedia/commons/c/ca/LinkedIn_logo_initials.png',
},
{
name: 'Spotify',
image: 'https://upload.wikimedia.org/wikipedia/commons/8/84/Spotify_icon.svg',
},
{
name: 'TikTok',
image: 'https://upload.wikimedia.org/wikipedia/en/a/a9/TikTok_logo.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 };