Shadcn.io is not affiliated with official shadcn/ui
Onboarding Migration Wizard
Multi-platform data import wizard with OAuth connect, progress tracking, and state animations for React and Next.js. Built with TypeScript, shadcn/ui, Tailwind CSS.
Import data from other platforms during onboarding with this migration wizard for React and Next.js. Features four source platform rows (Asana, Trello, Jira, Notion) with initials badges, Connect buttons triggering OAuth flow simulation, shadcn/ui Progress bars showing import percentage with tabular-nums, and done state with CheckIcon using Framer Motion AnimatePresence for smooth state transitions. Built with TypeScript interfaces, shadcn/ui Button and Progress components, Framer Motion staggered entrance animations, and Tailwind CSS. Perfect for SaaS migration flows, project management onboarding, CRM data import, and platform switching experiences requiring OAuth and progress tracking.
Related Components
Data Import
File upload and CSV import step
Integrations Setup
Third-party tool connections
First Project
Project creation wizard step
Contact Import
Address book and contact import
File Upload
Bulk file upload with progress
API Key Setup
API key configuration step
FAQ
Was this page helpful?
Sign in to leave feedback.
Mentor Match
Mentor preference selector with profile reveal for React and Next.js. Features industry, role, and random matching options. Built with TypeScript, shadcn/ui, Tailwind CSS.
Milestone Targets
A milestone targets onboarding block for React and Next.js with 30, 60, and 90 day milestone inputs, metric select dropdowns, and timeline visual built with shadcn/ui and Tailwind CSS.