React Avatar with Online Indicator
A circular avatar with a green presence indicator badge showing online status in messaging and collaboration apps
Looking to implement shadcn/ui patterns?
Join our Discord community for help from other developers.
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.
Pattern created by @haydenbleasel
Installation
npx shadcn@latest add https://www.shadcn.io/registry/avatar-standard-4.jsonnpx shadcn@latest add https://www.shadcn.io/registry/avatar-standard-4.jsonpnpm dlx shadcn@latest add https://www.shadcn.io/registry/avatar-standard-4.jsonbunx shadcn@latest add https://www.shadcn.io/registry/avatar-standard-4.jsonRelated patterns you will also like
Avatar Offline
Avatar with gray offline indicator
Basic Avatar
Avatar without status indicators
Avatar with Badge
Avatar with notification count badge
Square Avatar Online
Square avatar with online indicator
Presence Indicator
Standalone presence status badges
User Status
Complete user status patterns