Shadcn.io is not affiliated with official shadcn/ui
Notification Onboarding Step
An onboarding step notification block for React and Next.js with progress dots, step description, complete and skip actions, and next step preview built with shadcn/ui and Tailwind CSS
Guide users through setup flows with this onboarding step notification block for React and Next.js. Features a current step indicator with progress dots, a detailed step description, primary Complete Step and ghost Skip actions, and a preview of the upcoming step. Built with TypeScript, shadcn/ui Badge and Button components, Framer Motion staggered entrance animations, react-wrap-balancer, and Tailwind CSS. Perfect for SaaS onboarding flows, developer tool setup wizards, and product activation sequences.
Related Components
Welcome Notification
New user onboarding welcome notification
Achievement Notification
Achievement unlocked celebration notification
New Feature Notification
Feature announcement and changelog notification
Streak Notification
Usage streak notification with calendar
CTA Blocks
Call-to-action and conversion blocks
Hero Blocks
Landing page hero sections
FAQ
Was this page helpful?
Sign in to leave feedback.
New Feature
A new feature announcement notification block for React and Next.js with feature description, screenshot placeholder, try-it CTA button, and learn-more link built with shadcn/ui and Tailwind CSS
Password Expiry
A password expiry warning notification block for React and Next.js with countdown indicator, security recommendations, strength meter, and change password CTA built with shadcn/ui and Tailwind CSS