Avatar

A versatile avatar component for displaying user profile images, initials, and status indicators with dark mode support

Installation

Install the Avatar component using the nocta-ui CLI:

npx nocta-ui add avatar

Then import the component:

import { Avatar } from '@/components/ui/avatar';

Six size options are available: xs, sm, md, lg, xl, and 2xl. The default size is md.

The Avatar component supports two shape variants: circle (default) and square.

Add status indicators to show user presence: online, offline, away, or busy.

The Avatar component gracefully handles image loading failures with multiple fallback options.

Stack multiple avatars to show groups or teams.

Prop	Type	Default	Description
`src`	`string`	-	The image source URL
`alt`	`string`	`''`	Alt text for the image
`fallback`	`string`	-	Text to generate initials from, or custom initials
`size`	`'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl' \| '2xl'`	`'md'`	The size of the avatar
`variant`	`'circle' \| 'square'`	`'circle'`	The shape variant
`status`	`'online' \| 'offline' \| 'away' \| 'busy' \| null`	`null`	Status indicator
`className`	`string`	`''`	Additional CSS classes to apply

The Avatar component also accepts all standard HTML div element props through the ...props spread operator.