Not affiliated with official shadcn/ui. Visit ui.shadcn.com for official docs.
React Avatar with Count Indicator
A rounded square avatar with red notification count badge for workspace updates, integration alerts, or pending items
Looking to implement shadcn/ui patterns?
Join our Discord community for help from other developers.
Count badges on square avatars mean different things than on circles—workspace updates, not personal messages. This React avatar adds a bg-red-500 notification count at top-right of rounded-lg squares, showing pending items per workspace, unread integration alerts, or team notifications. Built with shadcn/ui and Radix UI, the badge uses font-medium text-xs for readability. Perfect for workspace switchers showing activity across environments, integration dashboards highlighting failing sync counts, or multi-tenant interfaces where counts aggregate by organization.
Pattern created by @haydenbleasel
Installation
Related patterns you will also like
Square Avatar Status
Square avatar with presence indicator
Circular Avatar Count
Circular avatar with count badge
Workspace Notifications
Multi-workspace notification patterns
Integration Alerts
Integration error and alert counts
Square Avatar Verified
Square avatar with verification badge
Notification Center
Aggregated notification interfaces