Onboarding Carousel
A React carousel onboarding block for Next.js with four slides, dot navigation, prev/next controls, and Framer Motion transitions. Built with shadcn/ui and Tailwind CSS.
Introduce product features with this React carousel onboarding block for Next.js. Features four informational slides each with a Lucide React icon, title, and description, dot navigation indicators for direct slide access, prev and next shadcn/ui Button navigation controls, and smooth Framer Motion AnimatePresence directional slide transitions. Built with TypeScript, shadcn/ui Button component, Framer Motion AnimatePresence directional transitions, Balancer for balanced text wrapping, and Tailwind CSS. Perfect for product feature introductions, mobile app onboarding, and guided tour sequences.
Related Components
React Welcome Onboarding Block
Welcome screen with feature highlights
React Stepper Onboarding Block
Linear numbered step-by-step wizard
React Setup Task Cards Onboarding Block
Grid of setup task cards with tracking
React Tour Onboarding Block
Interactive product tour with tooltips
React Video Intro Onboarding Block
Video introduction with play controls
React Feature Discovery Onboarding Block
Feature highlights with interactive demos
FAQ
Was this page helpful?
Sign in to leave feedback.
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.
Category Setup
A React category organization onboarding block with expandable tree hierarchy and chevron rotation. Built with Next.js, TypeScript, shadcn/ui, and Tailwind CSS.