# Social Connect Platform Buttons

> A sleek, interactive social connection component featuring three animated platform buttons (Discord, Slack, and Reddit) with a striking "CONNECT WITH US" heading. This modern UI element provides:  Visually Stunning Buttons - Each platform features its own color theme (indigo, purple, orange) with glass morphism effects, gradient backgrounds, and smooth hover animations  Interactive Connection States - Buttons transition through three states: disconnected, connecting (with spinner animation), and connected (with success indicators)  Rich Visual Feedback - Shimmer effects on hover, scale transformations, color transitions, and status indicators provide clear user feedback  Responsive Design - Buttons align horizontally on desktop and stack vertically on mobile devices  Platform-Specific Branding - Custom icons and color schemes for each social platform while maintaining visual consistency  Perfect for community websites, SaaS platforms, or any application requiring social platform integration with an engaging, modern interface.  Features ✨ Animated transitions between connection states  🎨 Platform-specific color themes with gradient effects  📱 Fully responsive design for all screen sizes  💫 Hover animations with scale and elevation effects  🔄 Visual feedback during connection process  ✅ Success states with checkmark icons and green indicators  Usage Simply import the component into your React application - it handles all connection states and animations automatically. Customize the platforms, colors, or connection logic to match your specific requirements.  Perfect for: Community portals, developer platforms, social apps, and any website needing engaging social connection features.

- Author: [M.bin Salman](https://21st.dev/@muhammad-binsalman)
- License: unknown
- Live preview: https://21st.dev/@muhammad-binsalman/components/social-connect-platform-buttons

## Install

```bash
npx shadcn@latest add "https://21st.dev/r/muhammad-binsalman/social-connect-platform-buttons?api_key=$API_KEY_21ST"
```

Requires a 21st API key (generate one at https://21st.dev/mcp) passed as `API_KEY_21ST`. Free accounts get a limited number of installs per day; unlimited on a paid plan — see https://21st.dev/pricing.

Full component directory: https://21st.dev/llms.txt