Avatar with Offline Indicator

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.

Avatar with Offline Indicator preview

Installation

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

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

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

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

Related Components

FAQ