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>

#

Variants

You can change the variant of the avatar by using the variant prop.

<HStack>
	<Avatar variant="filled" src="/olcia.webp" name="Girlfriend" />
	<Avatar variant="subtle" src="/olcia.webp" name="Girlfriend" />
	<Avatar variant="outline" src="/olcia.webp" name="Girlfriend" />
</HStack>

#

Badge

You can add a badge to the avatar by creating an absolute container inside relative one.

<Box relative>
	<Avatar src="/olcia.webp" name="Girlfriend" />
	<Box rounded='full' bg='success' absolute right={0} bottom={0} boxSize="3" />
</Box>

#

Show border

You can show a border around the avatar by using the showBorder prop. This will create a border with a current background color. Use borderColor prop to change the color of the border.

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

#

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