Avatar

The Avatar component displays user profile pictures with automatic fallback support. Built on Radix UI primitives.

Installation

npm install @nqlib/nqui

Import

import { Avatar, AvatarImage, AvatarFallback } from '@nqlib/nqui';

Basic Usage

import { Avatar, AvatarImage, AvatarFallback } from '@nqlib/nqui';

export default function Example() {
  return (
    <Avatar>
      <AvatarImage src="https://github.com/user.png" alt="User" />
      <AvatarFallback>JD</AvatarFallback>
    </Avatar>
  );
}

Examples

Basic Avatar

With Fallback

Sizes

SMMDLGXL

Props

Avatar

Prop	Type	Default	Description
`className`	`string`	-	Additional CSS classes
All standard `span` props	-	-	Accepts HTML span attributes

AvatarImage

Prop	Type	Default	Description
`src`	`string`	-	Image source URL
`alt`	`string`	-	Alt text for image
`loading`	`"lazy" \| "eager"`	`"lazy"`	Loading strategy
`onLoadingStatusChange`	`(status: "idle" \| "loading" \| "success" \| "error") => void`	-	Callback when load status changes
`className`	`string`	-	Additional CSS classes
All standard `img` props	-	-	Accepts HTML img attributes

AvatarFallback

Prop	Type	Default	Description
`delayMs`	`number`	-	Delay before showing fallback (for loading)
`asChild`	`boolean`	`false`	Merge props into child
`className`	`string`	-	Additional CSS classes
All standard `span` props	-	-	Accepts HTML span attributes

Next Steps

Learn about Badge for status indicators
Explore Data Display Components for other display elements