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.