Avatar with Count Indicator

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.

Avatar with Count Indicator preview

Installation

npx shadcn@latest add https://www.shadcn.io/r/avatar-standard-7.json

npx shadcn@latest add https://www.shadcn.io/r/avatar-standard-7.json

pnpm dlx shadcn@latest add https://www.shadcn.io/r/avatar-standard-7.json

bunx shadcn@latest add https://www.shadcn.io/r/avatar-standard-7.json

Related Components

FAQ