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
npx shadcn@latest add https://www.shadcn.io/registry/avatar-square-7.jsonnpx shadcn@latest add https://www.shadcn.io/registry/avatar-square-7.jsonpnpm dlx shadcn@latest add https://www.shadcn.io/registry/avatar-square-7.jsonbunx shadcn@latest add https://www.shadcn.io/registry/avatar-square-7.jsonRelated 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