Stop Rebuilding UI

Shadcn.io is not affiliated with official shadcn/ui

Previous: React Onboarding Carousel
Next: React Onboarding Completion

React Onboarding Checklist

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

Guide users through setup with this expandable checklist component. Features accordion steps, circular progress indicator, completion checkmarks, and action buttons. Built with shadcn/ui Card, Button, and DropdownMenu. Perfect for SaaS onboarding, product tours, or multi-step setup flows.

React Onboarding Checklist preview

Loading...
Scroll to load preview

Installation

Install
Pro block

React Onboarding Stepper

Linear stepper

React Onboarding Cards

Card grid layout

React Onboarding Progress

Progress bar style

React Onboarding Minimal

Minimal checklist

React Onboarding Welcome

Welcome modal

React Onboarding Completion

Completion celebration

FAQ

React Onboarding Carousel

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

React Onboarding Completion

Completion celebration with success animation, achievement stats, and next step suggestions