Avatar

A component that displays a user's profile image or initials.

Installation

npx micomponents-cli add avatar

Preview

Usage

Import

import { Avatar, AvatarImage, AvatarFallback } from "@/components/ui/avatar";

Basic Usage

<Avatar variant="primary" size="md" shape="circle">
  <AvatarImage src="https://github.com/shadcn.png" />
  <AvatarFallback>CN</AvatarFallback>
</Avatar>

Variants

Avatar comes with multiple color variants for different contexts.

PRISECTERQUA

Sizes

Choose from multiple sizes to fit your UI.

XSSMMLGXL

Shapes

Avatars can be displayed as circles or squares.

CRSQ

API Reference

Prop	Type	Default	Description
variant	primary \| secondary \| tertiary \| quaternary	primary	The color variant of the avatar
size	micro \| xs \| sm \| md \| lg \| xl	md	The size of the avatar
shape	circle \| square	square	The shape of the avatar

Components