Prologue
Getting Started
Dark Mode
Colors
Drag-and-drop
Forms
Utilities
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
If you hit any issues, make sure you check out the installation guide here.
Manual Installation
Anatomy
Import the components and use them as shown below, adapting the structure to fit each component.
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.
Size
By default, the avatar is medium. You can change it to small, large or extra-large by using the size prop.
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.