Shadcn.io is not affiliated with official shadcn/ui
Avatar with Online Indicator
A rounded square avatar with green online status indicator for workspace and app presence tracking
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.
Avatar with Online Indicator preview
Installation
Related Components
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
FAQ
Was this page helpful?
Sign in to leave feedback.