Person Avatar

Circular avatar for people. Renders a photo when available; otherwise shows the first initial on a dark surface. Used in testimonial cards.

32px

48px (default)

64px

Prop	Type	Default	Description
`name`*	`string`	-	Used as alt text and as the source for the fallback initial letter.
`image`	`SanityImage \| LocalImage`	-	Image object from Sanity or the local-image shape used for seeded content.
`localImagePath`	`string`	-	Direct path to a public image. Takes precedence over `image` when provided.
`sanityWidth`	`number`	`96`	Requested width (px) for the Sanity image URL builder. Height matches width.
`className`	`string`	-	Additional classes merged onto the outer circle. Override size with h-* / w-*.

tsx

import { PersonAvatar } from '@/components/ui/PersonAvatar'

tsx

<PersonAvatar
  name={testimonial.name}
  image={testimonial.image}
  localImagePath={testimonial.localImagePath}
/>