React Avatar with Offline Indicator
A circular avatar with a gray presence indicator badge showing offline or away status for inactive users
Looking to implement shadcn/ui patterns?
Join our Discord community for help from other developers.
Not everyone is online all the time—and showing offline status is just as important as online. This React avatar adds a gray bg-gray-400 presence indicator positioned at bottom-right, following the same pattern as online indicators but with subdued color. Built with shadcn/ui and Radix UI, the border-background styling creates clean separation from the avatar. Perfect for chat applications showing inactive users, team directories with mixed presence states, or any interface where distinguishing between active and inactive members matters.
Pattern created by @haydenbleasel
Installation
npx shadcn@latest add https://www.shadcn.io/registry/avatar-standard-5.jsonnpx shadcn@latest add https://www.shadcn.io/registry/avatar-standard-5.jsonpnpm dlx shadcn@latest add https://www.shadcn.io/registry/avatar-standard-5.jsonbunx shadcn@latest add https://www.shadcn.io/registry/avatar-standard-5.jsonRelated patterns you will also like
Avatar Online
Avatar with green online indicator
Basic Avatar
Avatar without status indicators
Square Avatar Offline
Square avatar with offline indicator
Presence Indicators
Standalone presence status badges
Avatar with Badge
Avatar with notification count
User Status
Complete user status patterns