Avatar

It’s more than a picture with curved corners. It’s a vibe, subtly revealing secrets. A cheeky peek into depth, grabbing more than just your gaze.

Basic

It ain't just a pic with curved corners, for real. It's the whole vibe, whispering secrets without a peep. A cheeky sneak into the deep, snatching more than your eyes can peep.

Installation

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

Avatar Initials

You can use the initials prop to display the initials of the user.

Fallback

If the image fails to load, the avatar will fallback to the initials.

Shape

By default, the avatar is a circle. You can change it to a square by using the shape prop.

dq-alhqDQdq-alhq

Size

By default, the avatar is medium. You can change it to small, large or extra-large by using the size prop.

avatar-smavatar-smavatar-mdavatar-lg

Status

You can use the status prop to display a badge with the status of the user.

Avatar Group

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