Dev Design Libraryshadcn/ui Avatar Components
Dev Design Library indexes 90 shadcn/ui avatar components from 12 open-source UI libraries, with the most coming from Watermelon UI, FLX UI, sv-particles, Shadcn Space and D2Studio UI. Each one links to its page with the source code, a live preview where available, the library license and the install command. They follow the shadcn/ui conventions, so most install with the shadcn CLI and drop into a Tailwind project. Avatar components belong to the Data display group.
Invite TeammatesSpectrum UI · ReactA one-seat team with an avatar rail, live invite field and copyable join link.
Sidebar User FooterFluid Functionalism · ReactFooter identity row: a 20px avatar centred on the rows' leading icon axis, chevron on the trailing action axis, and an…
Avatar-01 - DefaultShadcn Space · ReactDefault avatar component
Perplexity FaviconNotra · ReactA site favicon on shadcn Avatar with a gray fallback.
Avatar 01Watermelon UI · React
Glass Contact Pillglasscn · ReactLiquid-glass contact chip with an avatar (image or initials fallback) and name, for messaging apps
MessageHextaUI · ReactA chat message row with an avatar, name, bubbles and status, where new messages rise in from the sender's side.
AvatarCojeev UI · ReactPortraits, identity rows and participant groups that keep the person recognizable—with artwork, initials and…
BasicFLX UI · ReactImage avatar with an initials fallback.
Wavy heroVelora UI · ReactBold centered hero over flowing waves, with a rotating headline word and avatar social proof.
Basic Avatarsv-particles · Svelte
Hero 01D2Studio UI · ReactStartup mentorship landing hero with a headline, call to action and mentor avatar group.
Waitlist FooterSpectrum UI · ReactWaitlist capture with an avatar stack and a live position counter.
Avatar-02 - GroupShadcn Space · ReactGroup avatar component
Perplexity Model IconNotra · ReactGrayscale provider logos for the model list.
Avatar 02Watermelon UI · React
Fallback initialsFLX UI · ReactMissing image falls back to initials.
Fallback Onlysv-particles · Svelte
Hero Section 01D2Studio UI · ReactPremium landing page hero with a serif accent headline, badge and mentor avatar group.
Avatar-04 - BorderShadcn Space · ReactBorder avatar component
Avatar 03Watermelon UI · React
Icon fallbackFLX UI · ReactGeneric user icon when there is no image or name.
Large Overlapping Avatar Groupsv-particles · Svelte
Hero Section 02D2Studio UI · ReactModern landing page hero section with badge, headline and avatar social proof.
Avatar-06 - FallbackShadcn Space · ReactFallback avatar component
Avatar 04Watermelon UI · React
SizesFLX UI · ReactSmall, default, and large sizes side-by-side.
Overlapping Avatar Groupsv-particles · Svelte
Avatar-07 - Selectable AvatarShadcn Space · ReactAnimated selectable avatar button with optional badge and name label
Avatar 05Watermelon UI · React
Colored fallbackFLX UI · ReactTinted initials fallbacks using semantic tokens.
Rounded With Emerald Status Dotsv-particles · Svelte
Avatar-08 - Avatar stackShadcn Space · ReactStacked avatar group with overflow count and popularity indicator
Avatar 06Watermelon UI · React
Status badgeFLX UI · ReactPresence dot in the corner showing online, away, or offline.
Small Overlapping Avatar Groupsv-particles · Svelte
Avatar 10 - Upload with PreviewShadcn Space · ReactProfile photo uploader with instant preview, a camera hover overlay, file type and size validation, and a remove…
Avatar 1Watermelon UI · React
Badge with iconFLX UI · ReactVerified check icon inside the AvatarBadge.
With Avatarsv-particles · Svelte
Avatar 12 - Instagram Story RingsShadcn Space · ReactInstagram style story row with gradient rings for new stories, gray rings once viewed, an add story button, and a new…
Avatar 10Watermelon UI · React
With nameFLX UI · ReactAvatar beside a name and email, forming a user row.
With Different Radiisv-particles · Svelte
Avatar 13 - Generated InitialsShadcn Space · ReactInitials avatars with a color picked from the name, so each person keeps the same color, shown in three sizes and a…
Avatar 11Watermelon UI · React
GroupFLX UI · ReactOverlapping AvatarGroup stack of members.
With Different Sizessv-particles · Svelte
Badge 10 - With AvatarShadcn Space · ReactBadge component with avatar
Avatar 12Watermelon UI · React
Group with countFLX UI · ReactOverlapping group with a +N count for the remaining members.
With Emerald Status Dotsv-particles · Svelte
Select-07 - Select with avatarsShadcn Space · ReactSelect component
Avatar 13Watermelon UI · React
Group with tooltipFLX UI · ReactHover each avatar in the group to reveal its name.
With Muted Status Dotsv-particles · Svelte
Skeleton 02 - Table with AvatarsShadcn Space · ReactAnimated table skeleton with a title bar, muted header row, avatar+text rows, and badge placeholders — staggered…
Avatar 14Watermelon UI · React
Loading skeletonFLX UI · ReactSkeleton placeholder while the avatar loads.
With Notification Badgesv-particles · Svelte
Avatar 15Watermelon UI · React
Icon on topFLX UI · ReactIcon badge pinned to the top-right corner.
With Rounded Notification Badgesv-particles · Svelte
Avatar 16Watermelon UI · React
Invite teamFLX UI · ReactIcon header plus email field.
With User Icon Fallbacksv-particles · Svelte
Avatar 17Watermelon UI · React
Hero 08FLX UI · ReactA split hero with a bold headline, avatar social proof, and two image cards with invertible overlay text and CTAs.
With Verify Badgesv-particles · Svelte
Avatar 18Watermelon UI · React
Hero 10FLX UI · ReactA centered hero with a highlighted headline, dual CTAs, social proof, and a fanned collage of three overlapping images.
Avatar 19Watermelon UI · React
User listFLX UI · ReactAvatars with name, role, and Follow action per row.
Avatar 2Watermelon UI · React
Empty teamFLX UI · ReactOverlapping avatar stack above an empty-state message with an invite button.
Avatar 20Watermelon UI · React
Avatar StackFLX UI · ReactAvatar Stack for Live Presence.
Avatar 21Watermelon UI · React
Activity StatusFLX UI · ReactActivity Status for Live Presence.
Avatar 3Watermelon UI · React
Link with ScopeFLX UI · ReactLink with Scope for Share Access.
Avatar 4Watermelon UI · React
People PickerFLX UI · ReactPeople Picker for Share Access.
Avatar 5Watermelon UI · React
Request AccessFLX UI · ReactRequest Access for Share Access.
Avatar 6Watermelon UI · React
Avatar 7Watermelon UI · React
Avatar 8Watermelon UI · React
Avatar 9Watermelon UI · React
User Presence AvatarWatermelon UI · React
Libraries with shadcn/ui avatar components
Related categories
- Avatar Components
- React Avatar Components
- Tailwind CSS Avatar Components
- Svelte Avatar Components
- Animated Avatar Components
- shadcn/ui Data Display Components
- shadcn/ui Card Components
- shadcn/ui Table Components
- shadcn/ui Data Table Components
- shadcn/ui Accordion Components
- shadcn/ui Stat Components
- shadcn/ui List Components
- shadcn/ui Chart Components
- shadcn/ui Calendar Components
- shadcn/ui Collapsible Components
- shadcn/ui Stat Card Components
- shadcn/ui Avatar Group Components
- shadcn/ui Tree View Components
- shadcn/ui Carousel Components
- shadcn/ui Testimonial Components
- shadcn/ui Filter Bar Components