Shadcn.io is not affiliated with official shadcn/ui
React Social Connect Onboarding Block
Social account connection onboarding with Twitter, LinkedIn, GitHub, website platform rows, connect/connected toggle buttons, and skip/continue footer built with React, Next.js, shadcn/ui, and Tailwind CSS
Link social profiles with this social connect onboarding block for React and Next.js. Features four platform rows (Twitter/X, LinkedIn, GitHub, Personal Website) each with a platform icon, name, and a Connect/Connected toggle button with CheckIcon state indicator, a header showing connected account count (X/4 connected), and a footer with Skip and Continue actions. Built with TypeScript, React 19, Next.js App Router, shadcn/ui Button component, Framer Motion staggered entrance animations, Balancer for balanced text wrapping, and Tailwind CSS. Perfect for user profile enrichment, developer portfolio onboarding, and social proof collection flows in developer tools.
React Social Connect Onboarding Block preview
Installation
Related Components
Avatar Upload Onboarding
Profile photo upload with state transitions
Profile Setup Onboarding
Full profile form with name and bio
Integrations Onboarding
Third-party service integration setup
OAuth Onboarding
OAuth provider connection setup
Bio Onboarding
Biographical information input
Links Onboarding
Custom link and portfolio URL setup
FAQ
Was this page helpful?
Sign in to leave feedback.
React Skill Assessment Onboarding Block
Skill level self-assessment onboarding with three experience levels, selectable rows, personalized message, and continue action built with React, Next.js, shadcn/ui, and Tailwind CSS
React SSO Configuration Onboarding Block
An SSO configuration onboarding block for React and Next.js with provider select, metadata URL input, entity ID display, and test connection with loading states. Built with shadcn/ui and Tailwind CSS.