Social Button

​

Installation

npx shadcn@latest add @kokonutui/social-button

​

Usage

import SocialButton from "@/components/kokonutui/social-button";

export default function Example() {
  return <SocialButton />;
}

​

Props

​

Features

• Expands to reveal 4 social share buttons on hover
• Includes Twitter, Instagram, LinkedIn, and link copy
• Smooth width expansion animation
• Staggered button appearance for visual appeal
• Active state feedback on click
• Dark mode support
• Mouse leave to collapse

​

Social Platforms

• Twitter (Share on Twitter)
• Instagram (Share on Instagram)
• LinkedIn (Share on LinkedIn)
• Link (Copy link)

​

Dependencies

• motion/react (Framer Motion) - For expansion and stagger animations
• lucide-react - For social media icons
• @/components/ui/button - Base button component
• @/lib/utils - Utility functions (cn)

​

Customization