Docs/Avatar

Avatar

Circular user avatar with fallback initials. 3 sizes. Supports grouped avatars via AvatarGroup.

Usage

tsx

1import { Avatar } from '@storm-ds/ui'
2
3<Avatar src="/photo.jpg" alt="John Doe" />

Sizes

SMMDLG

Fallback

JDA

tsx

1<Avatar alt="John Doe" fallback="JD" />
2<Avatar alt="Alice" fallback="A" />

With Image

Group

ABC+2

tsx

1<AvatarGroup>
2  <Avatar fallback="JD" />
3  <Avatar fallback="AL" />
4  <Avatar fallback="SR" />
5</AvatarGroup>

Props

Prop	Type	Default	Description
size	'sm' \| 'md' \| 'lg'	'md'	Avatar size
src	string	-	Image URL
alt	string	-	Alt text
fallback	string	-	Initials shown when no src or image fails to load
className	string	-	Custom classes

Use with AI

Create a Next.js component using Storm UI's Avatar. Import: `import { Avatar, AvatarGroup } from '@storm-ds/ui'`. Avatar is a client component (handles image error fallback). Circular with border. Shows img when src provided, automatically falls back to initials if the image fails to load or no src is given. Sizes: sm (h-8), md (h-10), lg (h-12). Use AvatarGroup to render overlapping stacked avatars. Example: `<Avatar src="/photo.jpg" alt="John" fallback="JD" />` or `<AvatarGroup><Avatar fallback="JD" /><Avatar fallback="AL" /></AvatarGroup>`

Badge

Skeleton