React Avatar with Online Indicator
A rounded square avatar with green online status indicator for workspace and app presence tracking
Looking to implement shadcn/ui patterns?
Join our Discord community for help from other developers.
Square avatars with status dots work differently—they're less about person and more about system. This React avatar adds an online presence indicator to rounded-lg square shapes using bg-green-500 positioned at bottom-right. Built with shadcn/ui and Radix UI, it's perfect for workspace availability, integration health status, or app connection states. While circles show human presence, squares communicate whether workspaces, bots, or services are active and responding.
Pattern created by @haydenbleasel
Installation
npx shadcn@latest add https://www.shadcn.io/registry/avatar-square-4.jsonnpx shadcn@latest add https://www.shadcn.io/registry/avatar-square-4.jsonpnpm dlx shadcn@latest add https://www.shadcn.io/registry/avatar-square-4.jsonbunx shadcn@latest add https://www.shadcn.io/registry/avatar-square-4.jsonRelated patterns you will also like
Square Avatar Offline
Square avatar with offline indicator
Circular Avatar Online
Circular avatar with online status
Basic Square Avatar
Square avatar without indicators
Integration Status
Third-party service status indicators
Workspace Status
Workspace availability patterns
Square Avatar Count
Square avatar with notification badge