Avatar

Display user profile pictures or initials in a circular or rounded format.

Installation

Add the component to your project using the following command:

Usage

Import

Import the component and its related parts.

import {
  Avatar,
  AvatarImage,
  AvatarFallback,
  AvatarIndicator
} from "components/selia/avatar";

Structure

The expected structure and composition of the component.

<Avatar>
  <AvatarImage
    src="..."
    alt="Avatar"
  />
  <AvatarFallback>NA</AvatarFallback>
</Avatar>

Examples

Initials

Create an avatar with only initials.

Indicator

The AvatarIndicator component lets you add a small indicator to the avatar. It can be used to indicate the presence of a new message, a notification, or a badge.