Shadcn.io is not affiliated with official shadcn/ui
Notification Welcome
A welcome onboarding notification block for React and Next.js with getting started checklist, progress indicator, animated progress bar, and setup CTA built with shadcn/ui and Tailwind CSS
Guide new users through onboarding with this React and Next.js welcome notification block. Features a friendly welcome header with SparklesIcon, a getting started checklist with four interactive checkboxes, an animated Framer Motion progress bar, and a Complete Setup call-to-action Button. Built with TypeScript, shadcn/ui Button and Checkbox components, Balancer for balanced text, and Tailwind CSS. Perfect for SaaS onboarding flows, new user activation screens, and post-signup welcome experiences.
Related Components
Team Invite
Team invitation notification
Toast Stack
Stacked toast notifications
Update Available
App update notification
Changelog Notification
What's new changelog display
CTA Blocks
Call-to-action blocks
Account Blocks
Account and profile blocks
FAQ
Was this page helpful?
Sign in to leave feedback.
Webhook Received
A webhook received notification block for React and Next.js with event type badge, monospace payload preview, source identifier, timestamp, and replay action built with shadcn/ui and Tailwind CSS
Accordion Profiles
React expandable team accordion with shadcn/ui, Next.js, and Tailwind CSS showing profiles with chevron rotation