Avatar

Avatar gives people, teams, and objects a compact visual identity across dense UI.

Alice Smith

@alicesmith

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

export default function UsageDemo() {
  return (

Installation

Add this component with the NateUI CLI.

npx @nateui/cli@latest add Avatar

pnpm dlx @nateui/cli@latest add Avatar

yarn dlx @nateui/cli@latest add Avatar

Examples

Types

import { PiUser } from 'react-icons/pi'
import Avatar from '@/components/ui/avatar';

export default function TypesDemo() {

Sizes

import { PiUser } from 'react-icons/pi'
import Avatar from '@/components/ui/avatar';

export default function SizeDemo() {

Shapes

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

export default function ShapeDemo() {
  return (

Colors

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

const colors = [
  {

Status

import Avatar from '@/components/ui/avatar';
import Badge from '@/components/ui/badge';

const users = [

Group

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

const members = [
  {

API

Avatar accepts the props below plus native props for the root span.

Avatar

Prop	Description	Type	Default
`alt`	Alternate text passed to the rendered image when `src` is set.	`string`	-
`children`	Text fallback shown when neither `src` nor `icon` is provided.	`ReactNode`	-
`className`	Class names applied to the root avatar.	`string`	-
`icon`	Icon content shown when no image source is provided.	`ReactNode`	-
`onClick`	Click handler for interactive avatar usage.	`() => void`	-
`ref`	Ref forwarded to the root `span`.	`Ref<HTMLSpanElement>`	-
`shape`	Avatar corner treatment.	`AvatarShape`	`'circle'`
`size`	Preset size or numeric pixel size.	`AvatarSize`	`'md'`
`src`	Image URL rendered inside the avatar.	`string`	-
`srcSet`	Responsive image source set passed to the rendered image.	`string`	-
`...nativeSpanProps`	Native props for the root `span`.	`NativeAvatarSpanProps`	-

Avatar.Group

Prop	Description	Type	Default
`chained`	Overlaps child avatars into a chained stack.	`boolean`	`false`
`children`	Avatar elements rendered in the group.	`ReactNode`	-
`className`	Class names applied to the group wrapper.	`string`	-
`maxCount`	Maximum number of child avatars to show before rendering the overflow avatar.	`number`	`4`
`omittedAvatarContent`	Custom content for the overflow avatar.	`string \| ReactNode`	`'+N'`
`omittedAvatarProps`	Avatar props applied to the generated overflow avatar.	`Avatar props object`	-
`omittedAvatarTooltip`	Wraps the overflow avatar in a tooltip.	`boolean`	`false`
`omittedAvatarTooltipProps`	Tooltip props applied to the overflow tooltip, excluding `title`.	`AvatarTooltipProps`	-
`onOmittedAvatarClick`	Click handler for the overflow avatar.	`() => void`	-
`...nativeDivProps`	Native props for the group wrapper `div`.	`NativeAvatarGroupDivProps`	-

Types

type AvatarShape = 'round' | 'circle' | 'square';
type AvatarSize = 'sm' | 'md' | 'lg' | number;
type NativeAvatarSpanProps = ComponentProps<'span'>;
type AvatarTooltipProps = Omit<TooltipProps, 'title'>;
type NativeAvatarGroupDivProps = ComponentProps<'div'>;