Avatar - Dreamy UI

Avatar

Avatar is a simple div tag with styled system.

#

Installation

npx dreamy add avatar

pnpm dlx dreamy add avatar

yarn dlx dreamy add avatar

bunx dreamy add avatar

#

Usage

Avatar is a component that displays a user's profile picture without blocking navigation to load the image.

<Avatar src="/olcia.webp" name="Girlfriend" />

#

Sizes

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

<HStack>
	<Avatar size="sm" src="/olcia.webp" name="Girlfriend" />
	<Avatar size="md" src="/olcia.webp" name="Girlfriend" />
	<Avatar size="lg" src="/olcia.webp" name="Girlfriend" />
</HStack>

#

Avatar Group

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.

<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>

#

Persona

Using more Dreamy UI components, you can create a nice looking persona component.

Alexandra

Dream

<HStack>
	<Avatar src="/olcia.webp" size="md" name="Alexandra" />
	<Flex col>
		<Text size="sm" fontWeight="medium">
			Alexandra
		</Text>
		<Text size="sm" color="fg.medium">
			Dream
		</Text>
	</Flex>
</HStack>

Alert

Badge