React Onboarding Carousel

Multi-slide carousel with feature highlights, dot navigation, and skip option for feature introductions

Introduce features with this carousel component. Features multiple slides with illustrations, dot navigation, skip button, and progress indicators. Built with shadcn/ui Card and Button. Perfect for mobile apps, product tours, or sequential feature introductions.

React Onboarding Carousel preview

Scroll to load preview

Installation

Install

Pro block

npx shadcn@latest add https://www.shadcn.io/registry/onboarding-carousel.json

npx shadcn@latest add https://www.shadcn.io/registry/onboarding-carousel.json

pnpm dlx shadcn@latest add https://www.shadcn.io/registry/onboarding-carousel.json

bunx shadcn@latest add https://www.shadcn.io/registry/onboarding-carousel.json

React Onboarding Welcome

Welcome modal

React Onboarding Tour

Feature tour

React Onboarding Completion

Completion celebration

React Onboarding Templates

Template selection

React Onboarding Personalization

Content personalization

React Onboarding Walkthrough

Guided walkthrough

FAQ

React Onboarding Cards

Card grid with task cards, completion badges, and progress bar for non-linear setup tasks

React Onboarding Checklist

Expandable checklist with progress indicator, step descriptions, and action buttons for guided setup flows

React Onboarding Carousel