Baby Baltazar

Avatar

An image element with a fallback for representing the user.

Installation

Install this component via the shadcn CLI.

npx shadcn@latest add https://baby-baltazar-xi.vercel.app/r/avatar.json

Or install the theme first: npx shadcn@latest add https://baby-baltazar-xi.vercel.app/r/sthlm-theme.json

Preview

Interactive component demo.

With Image vs Fallback

CNJDAB

Sizes

SMMDLG

With Badge

SMCNLG

Avatar Group

CNJDABKL
+3

Usage

How to use this component in your code.

{/* Basic */}
<Avatar>
  <AvatarImage src="..." alt="..." />
  <AvatarFallback>CN</AvatarFallback>
</Avatar>

{/* Sizes */}
<Avatar size="sm"><AvatarFallback>SM</AvatarFallback></Avatar>
<Avatar size="lg"><AvatarFallback>LG</AvatarFallback></Avatar>

{/* With Badge */}
<Avatar>
  <AvatarFallback>CN</AvatarFallback>
  <AvatarBadge />
</Avatar>

{/* Group */}
<AvatarGroup>
  <Avatar><AvatarFallback>A</AvatarFallback></Avatar>
  <Avatar><AvatarFallback>B</AvatarFallback></Avatar>
  <AvatarGroupCount>+3</AvatarGroupCount>
</AvatarGroup>