Documentation

Quick Start

Our social media components are designed to be copy-and-paste friendly. Choose between the rotating circle or scrolling marquee style to showcase your social media links.

1. Browse the component library
2. Choose between SocialIconsCircle or SocialIconsMarquee
3. Copy the component code from the "Code" tab
4. Paste it into your project
5. Customize your social media links

Prerequisites

Our components are built with React and styled with Tailwind CSS. Make sure you have these installed in your project:

All components are framework-agnostic and work with any React setup including Next.js, Create React App, Vite, and more.

Component Options

We offer two social media component styles:

• SocialIconsCircle: A rotating circle of social media icons with hover effects
• SocialIconsMarquee: A horizontally scrolling marquee with centered highlight effects

Example - Circle Style

// 1. Copy the component code
import SocialIconsCircle from './components/SocialIconsCircle'

// 2. Use it in your JSX
function App() {
  return (
    <div>
      <SocialIconsCircle />
    </div>
  )
}

// The component will automatically:
// - Display social media icons in a rotating circle
// - Show color effects on hover
// - Handle smooth animations and transitions

Example - Marquee Style

// 1. Copy the component code
import SocialIconsMarquee from './components/SocialIconsMarquee'

// 2. Use it in your JSX
function App() {
  return (
    <div>
      <SocialIconsMarquee />
    </div>
  )
}

// The component will automatically:
// - Create an infinite scrolling marquee
// - Highlight icons when centered
// - Show color effects on hover

Social Links

Customize the social media links by modifying the socialLinks array:

const socialLinks = [
  {
    href: "https://github.com/Anuja-jayasinghe",
    label: "GitHub",
    blackIcon: "/path/to/black-icon.svg",
    whiteIcon: "/path/to/white-icon.svg",
    colorIcon: "/path/to/color-icon.svg",
    angle: 0, // Only for circle component
  },
  // Add more social links...
]

Styling

Both components use Tailwind CSS classes and can be customized:

• Adjust the size of icons using the w-* and h-* classes
• Modify animation speeds by changing the duration values
• Customize the gap between icons in the marquee
• Adjust the circle radius for the rotating component

• Optimize your icons: Use SVG icons for best quality and performance.
• Provide fallbacks: Include both black and colored versions of icons for smooth transitions.
• Accessibility: Always include proper aria-labels and ensure keyboard navigation works.
• Performance: Consider lazy loading for the marquee component if it's below the fold.
• Mobile optimization: Test the components on various screen sizes and adjust accordingly.

Need help with the social media components?

• • Check the component documentation and examples
• • Review the socialLinks configuration options
• • Look at the animation and styling customization options
• • Open an issue on GitHub for bugs or feature requests