Avatar with Online Indicator

You know that little green dot next to profile pictures in Slack, Discord, or Microsoft Teams? This React avatar adds an online presence indicator using an absolutely positioned bg-green-500 circle with border-background styling. Built with shadcn/ui and Radix UI, the status badge sits at bottom-right with -bottom-1 -right-1 positioning that overlaps the avatar edge elegantly. Perfect for chat applications, team directories, video conferencing interfaces, or any real-time collaboration tool where presence awareness matters.

Avatar with Online Indicator preview

Installation

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

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

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

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

Related Components

FAQ