Studiov0.6.0

Avatar

Tier 1shadcn
Data Display

A user or entity image with an initials fallback when the image is unavailable.

Live Preview

DLSC

Code

import { Avatar } from "@regen/ui";

<Avatar />

Props Inspector

No configurable props for this component.

Documentation

Use Cases

  • User profile photos
  • Contact list items
  • Comment authors

Do

  • Always provide AvatarFallback with initials
  • Use AvatarImage with alt text

Don't

  • Don't use without a fallback
  • Don't display avatars larger than 64px in lists