Avatar

Represent a person or entity.

Installation

import { Avatar } from "~/components/ui/Avatar";

Usage

CNSD
<Avatar fallback="CN" />
<Avatar src="/seth.jpg" alt="Seth" fallback="SD" />

API reference

PropTypeDefaultDescription
srcstring-Image URL; falls back to initials if it fails to load.
altstring-Alt text for the image.
fallbackstring-Initials shown when there is no image.

Accessibility

  • Built on the Base UI Avatar primitive; the fallback renders if the image is missing or slow.
  • Provide meaningful alt text when the avatar conveys identity.
View site