Avatar

The Avatar component is a circular image element used to visually represent a user — commonly seen in comments, profile previews, team sections, and other user-centered UI elements.

You can easily swap the image using the Component Properties panel.

Avatars can be displayed individually or in groups. For grouped displays, use the Avatar Group component. This creates a horizontally stacked layout with overlapping Avatars and subtle borders to distinguish each one visually.

Usage

1. Drag the Avatar component onto the canvas.
2. Replace the image using the properties panel.
3. Adjust the size by switching the Avatar item's variant (e.g. small, medium, large).
4. (Optional) Wrap multiple Avatars inside the Avatar Group for an overlapping layout.

This setup is ideal for team previews, participant lists, or collaborative tools.