Avatar

Avatar is a simple div tag with styled system.

Source
Theme Source
  • Avatar - The main component that wraps the avatar.
  • AvatarGroup - The wrapper component for stacking multiple avatars.
import { Avatar, AvatarGroup } from "@dreamy-ui/react";

Photo by Quang Anh Ha Nguyen

W
<Avatar
  src="/asian-woman.webp"
  name="Woman"
/>

You can set the size of the avatar by using the size prop.

W
W
W
<HStack>
  <Avatar
    size="sm"
    src="/asian-woman.webp"
    name="Woman"
  />
  <Avatar
    size="md"
    src="/asian-woman.webp"
    name="Woman"
  />
  <Avatar
    size="lg"
    src="/asian-woman.webp"
    name="Woman"
  />
</HStack>

AvatarGroup is a wrapper around Avatars that displays a number of avatars grouped together in a stack. Use maxAvatars prop to limit the number of avatars displayed.

+4
D
D
D
D
<AvatarGroup maxAvatars={4}>
  <Avatar name="Dream" />
  <Avatar name="Dream" />
  <Avatar name="Dream" />
  <Avatar name="Dream" />
  <Avatar name="Dream" />
  <Avatar name="Dream" />
  <Avatar name="Dream" />
  <Avatar name="Dream" />
</AvatarGroup>