Shadcn.io is not affiliated with official shadcn/ui
Onboarding Social Connect
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.
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.
Skill Assessment
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
Sso Config
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.