edbnedbn/ui
All Blocks
Categories
Avatars
Calls to ActionFootersHeadersIconsMarqueesPost CardsSection HeadingsInputsDialogsNavigationButtons
Quick Links
Get StartedComponents
0installs
ComponentsBlocks
Back to Blocks

Avatar Blocks

14 production-ready avatar patterns. Copy and paste into your project.

On this page

Basic AvatarAvatar SizesStatus IndicatorsAvatar GroupRounded VariantsStacked AvatarsUser CardNotification BadgeEditable AvatarAvatar PlaceholdersInteractive Member SelectorAvatar with Quick ActionsActivity IndicatorsTeam Grid

Basic Avatar

Simple avatar with image and fallback initials

CN
LR
AB

Avatar Sizes

All 6 size variants from xs (24px) to 2xl (64px)

XS
xs
SM
sm
MD
md
LG
lg
XL
xl
2XL
2xl

Status Indicators

Online, away, busy, and offline presence states

US
online
US
away
US
busy
US
offline

Avatar Group

Overlapping avatars with +N overflow indicator

U1
U2
U3
U4
+2
Shows 4 avatars + "+2" overflow

Rounded Variants

Circle, rounded-lg, and square avatar shapes

CN
Circle
LR
Rounded
RG
Square

Stacked Avatars

Grayscale stacked group with ring effect

CN
LR
RG

User Card

Avatar with name, role, and status in a card layout

CN

Shadcn

Design Engineer

LR

Lee Robinson

VP of Product

Notification Badge

Unread count badges for messaging and notifications

CN
3
LR
99+
RG

Editable Avatar

Profile picture with hover overlay for upload

ME
ME

Avatar Placeholders

Icon-based placeholders when no user data is available

+

Interactive Member Selector

Selectable team members with checkmarks

Avatar with Quick Actions

Hover to reveal action buttons

CN

Activity Indicators

Visual states for user activity or process status

Completed
Pending
Failed
Notification

Team Grid

Responsive grid layout for team members

T1
User 1
T2
User 2
T3
User 3
T4
User 4
T5
User 5
T6
User 6

Need more patterns?

Request a pattern or contribute your own.

Request a BlockAll Blocks