Components
Loading preview...
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.
@wasifbinnasir
npx shadcn@latest add https://21st.dev/r/wasifgee0012/social-linksimport * 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>
);
}