Avatar with Offline Indicator

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.

Avatar with Offline Indicator preview

Installation

npx shadcn@latest add https://www.shadcn.io/r/avatar-square-5.json

npx shadcn@latest add https://www.shadcn.io/r/avatar-square-5.json

pnpm dlx shadcn@latest add https://www.shadcn.io/r/avatar-square-5.json

bunx shadcn@latest add https://www.shadcn.io/r/avatar-square-5.json

Related Components

FAQ