React Avatar with Count Indicator
A circular avatar with a red notification count badge showing unread messages or pending actions
Looking to implement shadcn/ui patterns?
Join our Discord community for help from other developers.
That little red bubble with a number on messenger apps—it demands attention and drives engagement. This React avatar adds a notification count badge positioned at top-right with -right-2 -top-2, using bg-red-500 for urgency and text-white for contrast. Built with shadcn/ui and Radix UI, the badge includes border-background separation and font-medium text-xs for readability. Perfect for chat applications showing unread message counts, inbox interfaces, notification centers, or any scenario where quantifying pending items motivates user action.
Pattern created by @haydenbleasel
Installation
npx shadcn@latest add https://www.shadcn.io/registry/avatar-standard-7.jsonnpx shadcn@latest add https://www.shadcn.io/registry/avatar-standard-7.jsonpnpm dlx shadcn@latest add https://www.shadcn.io/registry/avatar-standard-7.jsonbunx shadcn@latest add https://www.shadcn.io/registry/avatar-standard-7.jsonRelated patterns you will also like
Avatar with Status
Avatar with presence indicator
Avatar Verified
Avatar with verification badge
Square Avatar Count
Square avatar with count badge
Count Badge
Standalone notification count badges
Notification Badge
Notification badge patterns
Inbox with Counts
Message inbox with unread counts