Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/kokonut-labs/kokonutui/llms.txt

Use this file to discover all available pages before exploring further.

​
Installation

npx shadcn@latest add @kokonutui/social-button

​
Usage

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

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

​
Props

PropTypeDefaultDescription
classNamestring-Additional CSS classes
Extends all standard HTML button attributes.

​
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

The component includes icons for:
  • 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

The share buttons array can be modified in the component source to add or remove social platforms based on your needs.