NerdfishUI

Avatar

An avatar is a graphical representation of a user, typically used in a social context.

View on GitHub
DM
tsx
'use client'

import { Avatar, AvatarImage, AvatarFallback } from '@nerdfish/ui'

export function AvatarExample() {
	return (
		<Avatar>
			<AvatarImage
				src="https://avatars.githubusercontent.com/u/56068461?s=40&v=4"
				alt="@darenmalfait"
			/>
			<AvatarFallback>DM</AvatarFallback>
		</Avatar>
	)
}

Usage

tsx
import { Avatar, AvatarImage, AvatarFallback } from '@nerdfish/ui'
import Image from 'next/image'
tsx
<Avatar>
	<AvatarImage
		src="https://avatars.githubusercontent.com/u/56068461?s=40&v=4"
		alt="@darenmalfait"
	/>
	<AvatarFallback>DM</AvatarFallback>
</Avatar>