Components
Starting preview...
Link with image appearing on hover. Inspired by @alexanderolssen and @ln_dev7
npx shadcn@latest add https://21st.dev/r/serafimcloud/social-linksimport { SocialLinks } from "@/components/ui/social-links"
const socials = [
{
name: "Instagram",
image: "https://link-hover-lndev.vercel.app/instagram.png",
},
{
name: "LinkedIn",
image: "https://link-hover-lndev.vercel.app/linkedin.png",
},
{
name: "Spotify",
image: "https://link-hover-lndev.vercel.app/spotify.png",
},
{
name: "TikTok",
image: "https://link-hover-lndev.vercel.app/tiktok.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 default {
SocialLinksDemo,
SocialLinksCustomGap,
}