Avatar

Example

A component that displays a user’s profile picture or initials.

import { Avatar, AvatarFallback, AvatarImage } from "@yummacss/ui";

export default function Page() {
  return (
    <Avatar>
      <AvatarImage src="https://images.unsplash.com/photo-1542206395-9feb3edaa68d" alt="Seline Collins" />
      <AvatarFallback>SC</AvatarFallback>
    </Avatar>
  );
};

API reference

size

Default value is md

(property) size?: "sm" | "md" | "lg" | null | undefined

shape

Default value is circle

(property) shape?: "circle" | "square" | null | undefined

Custom styling

Apply custom styles to the <Avatar> component.

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

<Avatar className="...">
  ...
</Avatar>

Extend properties

Extend the <Avatar> component with the Base UI API.

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

<Avatar {...props}>
  ...
</Avatar>