Avatar
The Avatar component is used to represent a user, and displays the profile picture, initials or fallback icon.

Installation

In the terminal, run the following command to begin:
npx hq-kit add avatar

Basic

Sample ImageSample ImageSample ImageSample ImageSample Image

Avatar Initials

Use the initials prop to display the initials of the user.

Fallback

If the image fails to load and no initials, the icon will be displayed

Shape

dq-alhq

Size

avatar-smavatar-smavatar-mdavatar-lgavatar-xlavatar-2xlavatar-3xlavatar-4xlavatar-5xl

Avatar Group

You can use the AvatarGroup component to display a group of avatars.

Sample ImageSample ImageSample ImageSample ImageSample Image