Not affiliated with official shadcn/ui. Visit ui.shadcn.com for official docs.
React Onboarding Cards
Card grid with task cards, completion badges, and progress bar for non-linear setup tasks
Looking to implement shadcn/ui blocks?
Join our Discord community for help from other developers.
Display setup tasks with this card grid component. Features task cards with icons, completion checkmarks, overall progress bar, and motivational messaging. Built with shadcn/ui Card and Progress. Perfect for dashboard onboarding, feature discovery, or independent setup tasks.
Welcome! Let's get you set up
Complete these tasks to get the most out of your account
Complete your profile
Add your photo and bio
Invite team members
Collaborate with your team
Create first document
Start with a template
Generate API key
Enable integrations
Customize branding
Add your logo and colors
Connect integrations
Link your favorite tools
Installation
Related blocks you will also like
React Onboarding Checklist
Expandable checklist
React Onboarding Progress
Progress bar style
React Onboarding Integrations
App connections
React Onboarding Use Case
Use case selection
React Onboarding Templates
Template selection
React Onboarding Personalization
Content personalization