Cephalopod

Avatar

An image element with a fallback for representing the user.

Variants

CN

Image

JD

Fallback

CN

Square

Groups

Standard Group
+1
Compact Group
+1

Usage

Code Example
import { Avatar, AvatarFallback, AvatarImage } from "cephalopod-design-system"
import { AvatarGroup } from "cephalopod-design-system"

// Single Avatar
<Avatar>
  <AvatarImage src="https://github.com/shadcn.png" />
  <AvatarFallback>CN</AvatarFallback>
</Avatar>

// Avatar Group
<AvatarGroup max={3}>
  <Avatar><AvatarImage src="..." /></Avatar>
  <Avatar><AvatarImage src="..." /></Avatar>
  <Avatar><AvatarImage src="..." /></Avatar>
  <Avatar><AvatarImage src="..." /></Avatar>
</AvatarGroup>