Shadcn.io is not affiliated with official shadcn/ui
Usage Streak Notification Block
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.
Usage Streak Notification Block preview
Installation
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 Quota Warning Notification Block
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 Notification Block
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