Studiov0.6.0

Avatar

Tier 1 — shadcn
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