Avatar

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

Installation

CLI

Manual

In the terminal, run the following command to begin:

npx hq-kit add avatar

View

Code

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

View

Code

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

View

Code

View

Code

View

Code

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

View

Code