Shadcn.io is not affiliated with official shadcn/ui
Onboarding Integrations
An integration connection onboarding component for React and Next.js with connect buttons, connected states, and count tracker built with shadcn/ui and Tailwind CSS.
Connect third-party tools during onboarding with this React and Next.js integrations component. Features six integration rows for Slack, GitHub, Figma, Jira, Linear, and Notion with name, description, and individual Connect buttons that swap to a Connected state with a check icon. Tracks the connected count in the header with dynamic updates. Built with TypeScript, React 19, Next.js, shadcn/ui Button component, Framer Motion staggered entrance animations and layout transitions, and Tailwind CSS. Perfect for SaaS onboarding flows, workspace configuration steps, and third-party OAuth connection screens.
Related Components
React First Project Onboarding Block
Project creation onboarding step
React Goal Setting Onboarding Block
Goal selection onboarding step
React Keyboard Shortcuts Onboarding Block
Shortcut learning onboarding step
React API Key Setup Onboarding Block
API key configuration onboarding
React Plugin Install Onboarding Block
Plugin installation onboarding
React Calendar Sync Onboarding Block
Calendar integration onboarding
FAQ
Was this page helpful?
Sign in to leave feedback.
Industry Picker
An industry selection onboarding component for React and Next.js with multi-select chip buttons, ring highlight states, and selected count built with shadcn/ui and Tailwind CSS.
Invite Link
A shareable invite link onboarding component for React and Next.js with copyable link display, regenerate action, and share counter built with shadcn/ui and Tailwind CSS.