Avatar

Circular user avatar with image or initials fallback. AvatarGroup stacks multiple avatars.

Sizes

ASBJCRDL

import { Avatar } from '@canarist/ui'

<Avatar name="Anna Smith" size="sm" />
<Avatar name="Brian Jones" size="md" />
<Avatar name="Carlos Ruiz" size="lg" />
<Avatar name="Diana Lee" size="xl" />

With image

<Avatar
  src="https://example.com/user.jpg"
  name="Alex"
  size="lg"
/>

AvatarGroup

ASBJCR+2

import { Avatar, AvatarGroup } from '@canarist/ui'

<AvatarGroup max={3}>
  <Avatar name="Anna Smith" />
  <Avatar name="Brian Jones" />
  <Avatar name="Carlos Ruiz" />
  <Avatar name="Diana Lee" />
  <Avatar name="Eve Torres" />
</AvatarGroup>

Reference

Prop	Type	Default	Description
src	string \| null	—	Image URL. Falls back to initials if not provided or on error.
name	string	—	User name used to generate initials.
size	'sm' \| 'md' \| 'lg' \| 'xl'	'md'	Avatar dimensions.
className	string	—	Additional CSS classes.