Avatar

Display user profile pictures or icons

Source Code Radix UI

Installation


pnpm dlx radianui@latest add avatar

Usage

Imports

/components/ui/avatar.tsx

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

Code

/components/ui/avatar.tsx

<Avatar size="48" rounded="circle">
	<AvatarImage src="https://radianos.com/logo.png" />
	<AvatarFallback>RS</AvatarFallback>
	<AvatarIndicator>
		<AvatarStatus variant="online" />
	</AvatarIndicator>
</Avatar>

Examples

Size

KTKTKTKTKTKTKTKTKT

Fallback

Status

Custom Avatar - w/Status

Custom Avatar - w/Badge

Custom Avatar - w/Ring

CHAJAJAJ

Rounded - Square

ABAPCH

Avatar Group

NBLRECAPMC+9

Props

Name	Default	Values
size	40	162024324048566480
rounded	circle	circlesquare
External Reference	-	-

Name	Default	Values
External Reference	-	-

Name	Default	Values
External Reference	-	-

Name	Default	Values

Name	Default	Values
variant	online	onlineofflinebusyaway
size	40	162024324048566480
External Reference	-	-