Shadcn.io is not affiliated with official shadcn/ui
Onboarding Calendar Sync
A React calendar sync onboarding block for Next.js with Google, Outlook, and Apple Calendar connection rows and sync action. Built with shadcn/ui and Tailwind CSS.
Connect your calendars with this React calendar sync onboarding block for Next.js. Features three calendar provider rows for Google Calendar, Outlook, and Apple Calendar with connect and connected state buttons using shadcn/ui Button components showing emerald check indicators via Lucide React icons, a sync now call-to-action, and staggered Framer Motion entrance animations. Built with TypeScript, shadcn/ui Button component, Framer Motion, Balancer for balanced text wrapping, and Tailwind CSS. Perfect for scheduling app onboarding, productivity tool setup, and calendar integration flows.
Related Components
React Integrations Onboarding Block
Third-party service connection setup
React Preferences Onboarding Block
App preference toggles with switch controls
React Notification Setup Onboarding Block
Email and push notification preferences
React Timezone Setup Onboarding Block
Timezone and locale configuration
React Workspace Setup Onboarding Block
Workspace name and configuration
React Availability Onboarding Block
Working hours and schedule configuration
FAQ
Was this page helpful?
Sign in to leave feedback.
Budget Allocation
A React budget allocation onboarding block for Next.js with NumberFlow animated total, category rows with progress bars, and set budgets action. Built with shadcn/ui and Tailwind CSS.
Cards
A React task cards onboarding block for Next.js with four task cards, Lucide icons, action buttons, and completion tracking. Built with shadcn/ui and Tailwind CSS.