Shadcn.io is not affiliated with official shadcn/ui
Achievement Unlocked Notification Block
An achievement unlocked notification block for React and Next.js with trophy icon, badge display, progress summary, XP indicator, and staggered entrance animations built with shadcn/ui and Tailwind CSS
Celebrate user milestones with this achievement unlocked notification block for React and Next.js. Features a TrophyIcon header with achievement name and description, a visual badge display, project completion progress summary, and animated XP points earned indicator. Built with TypeScript, shadcn/ui Badge and Button components, Framer Motion staggered animations, react-wrap-balancer, and Tailwind CSS. Perfect for gamified SaaS platforms, developer tools with progression systems, and learning management dashboards.
Achievement Unlocked Notification Block preview
Installation
Related Components
Milestone Notification
Milestone reached celebration notification
Streak Notification
Usage streak notification with calendar
Success Toast Notification
Success toast with auto-dismiss bar
Referral Notification
Referral accepted reward notification
CTA Blocks
Call-to-action and conversion blocks
Account Blocks
User account and settings blocks
FAQ
Was this page helpful?
Sign in to leave feedback.
Workspace Switcher Navbar Block
A SaaS navigation bar with workspace and organization switcher dropdown built with React, Next.js, shadcn/ui, and Tailwind CSS. Features workspace avatar, name display, workspace list with create option, standard nav links, and user menu.
Notification Activity Feed Block
A vertical timeline activity feed block for React and Next.js with colored dot indicators, actor names, timestamps, and staggered entrance animations built with shadcn/ui and Tailwind CSS