Components
A fully responsive and theme-aware social media links component that displays a vertical sidebar on desktop and a floating expandable dock on mobile. Each link is styled with platform-specific gradients and consistent white icons for both light and dark themes. The floating dock includes an interactive toggle button that adapts its icon color based on theme mode.
npx shadcn@latest add https://21st.dev/r/wasifgee0012/social-linksLoading preview...
import * as React from "react";
import { SocialLinks } from "@/components/ui/social-links";
export default function SocialLinksDemo() {
return (
<div className="min-h-screen flex items-center justify-center bg-[hsl(var(--background))]">
<SocialLinks
links={[
{ platform: "linkedin", href: "https://linkedin.com" },
{ platform: "github", href: "https://github.com" },
{ platform: "instagram", href: "https://instagram.com" },
{ platform: "mail", href: "mailto:test@example.com" },
{ platform: "website", href: "https://example.com" },
]}
floatingButtonColor="bg-slate-700"
/>
</div>
);
}