React Avatar with Offline Indicator
A rounded square avatar with gray offline indicator for inactive workspaces, disconnected integrations, or unavailable services
Looking to implement shadcn/ui patterns?
Join our Discord community for help from other developers.
Gray dots on square avatars tell a different story than on circles—system down, not just person away. This React avatar uses bg-gray-400 presence indicator on rounded-lg squares for workspace offline states, disconnected integrations, or services that aren't responding. Built with shadcn/ui and Radix UI, the subdued gray communicates unavailable or disabled without alarm. Perfect for integration dashboards showing connection health, workspace switchers with inactive environments, or service status pages where distinguishing operational from offline matters.
Pattern created by @haydenbleasel
Installation
npx shadcn@latest add https://www.shadcn.io/registry/avatar-square-5.jsonnpx shadcn@latest add https://www.shadcn.io/registry/avatar-square-5.jsonpnpm dlx shadcn@latest add https://www.shadcn.io/registry/avatar-square-5.jsonbunx shadcn@latest add https://www.shadcn.io/registry/avatar-square-5.jsonRelated patterns you will also like
Square Avatar Online
Square avatar with online indicator
Circular Avatar Offline
Circular avatar with offline status
Integration Health
Service health and connectivity status
Inactive Workspace
Disabled or archived workspace patterns
Basic Square Avatar
Square avatar without indicators
Status Badges
Operational status indicators