Components
Loading preview...
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.
@muhammad-binsalman
npx shadcn@latest add https://21st.dev/r/muhammad-binsalman/social-connect-platform-buttonsimport { SocialConnectButtons } from "@/components/ui/social-connect-platform-buttons";
export default function DemoOne() {
return <SocialConnectButtons />;
}