Notification Badge
Animated notification badge with dot, count, and status variants for displaying alerts and user presence.
Installation
pnpm dlx shadcn add @smoothui/notification-badgenpx shadcn@latest add @smoothui/notification-badgeyarn dlx shadcn add @smoothui/notification-badgebunx shadcn add @smoothui/notification-badgeFeatures
- Three variants: dot (simple indicator), count (number badge), status (presence indicator)
- Animated count changes with scale pop effect
- Ping animation for attention-grabbing alerts
- Status colors for user presence: online (green), offline (gray), busy (red), away (yellow)
- Flexible positioning in all four corners
- Wraps any element as children
- Respects reduced motion preferences
- Accessible with proper ARIA attributes