Shadcn.io is not affiliated with official shadcn/ui
Notification Streak
A usage streak notification block for React and Next.js with flame icon, 7-day streak calendar visualization, current and best streak counters, and encouragement message built with shadcn/ui and Tailwind CSS
Motivate consistent usage with this streak notification block for React and Next.js. Features a FlameIcon header celebrating a 7-day streak, a weekly calendar dot visualization showing active days, large current streak counter, personal best record, and an encouraging keep-it-going message. Built with TypeScript, shadcn/ui Badge and Button components, Framer Motion staggered animations, react-wrap-balancer, and Tailwind CSS. Perfect for habit-tracking apps, learning platforms, and developer tools with daily engagement goals.
Related Components
Achievement Notification
Achievement unlocked celebration notification
Milestone Notification
Milestone reached celebration notification
Success Toast Notification
Success toast with auto-dismiss bar
Discount Offer Notification
Promo code and discount notification
Account Blocks
User account and settings blocks
CTA Blocks
Call-to-action and conversion blocks
FAQ
Was this page helpful?
Sign in to leave feedback.
Storage Warning
A storage quota warning notification block for React and Next.js with animated progress bar, file type breakdown, usage meter, and manage storage and upgrade actions built with shadcn/ui and Tailwind CSS
Subscription Renewed
A subscription renewal confirmation notification block for React and Next.js with payment details, plan summary, next renewal date, and view invoice and manage plan actions built with shadcn/ui and Tailwind CSS