Shadcn.io is not affiliated with official shadcn/ui
Onboarding 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.
Organize setup tasks with this React task cards onboarding block for Next.js. Features four setup task cards each with a descriptive Lucide React icon, title, description, and shadcn/ui Button action, a header showing completion count with emerald dot indicator using Tailwind CSS, and togglable completed states per card managed with React useState. Built with TypeScript, shadcn/ui Button component, Framer Motion staggered entrance animations, Balancer for balanced text wrapping, and Tailwind CSS. Perfect for dashboard onboarding widgets, feature discovery panels, and non-linear setup task displays.
Related Components
React Welcome Onboarding Block
Welcome screen with feature highlights
React Onboarding Checklist Block
Expandable setup checklist with progress
React Stepper Onboarding Block
Linear numbered step-by-step wizard
React Progress Onboarding Block
Progress bar with milestone indicators
React Quick Start Onboarding Block
Quick start guide with video tutorials
React Tour Onboarding Block
Interactive product tour with tooltips
FAQ
Was this page helpful?
Sign in to leave feedback.
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.
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.