Avatar

A graphical representation of the user, often used in profile sections.

Anatomy

To set up the avatar correctly, you'll need to understand its anatomy and how we name its parts.

Each part includes a data-part attribute to help identify them in the DOM.

Examples

Learn how to use the Avatar component in your project. Let's take a look at the most basic example:

Example not found

Example not found

Example not found

Example not found

Handling Events

Use onStatusChange to listen for loading state changes.

Example not found

Example not found

Example not found

Example not found

Root Provider

Use the useAvatar hook to create the avatar store and pass it to the Avatar.RootProvider component. This allows you to have maximum control over the avatar programmatically.

Example not found

Example not found

Example not found

Example not found

If you're using the Avatar.RootProvider component, you don't need to use the Avatar.Root component.

Guides

Next.js Image

Here's an example of how to use the Image component from next/image.

import { Avatar, useAvatarContext } from '@ark-ui/react/avatar'
import { getImageProps, type ImageProps } from 'next/image'

const AvatarNextImage = (props: ImageProps) => {
  const avatar = useAvatarContext()

  const { hidden, ...arkImageProps } = avatar.getImageProps()
  const nextImage = getImageProps(props)

  return (
    <img
      {...arkImageProps}
      {...nextImage.props}
      style={{
        ...props.style,
        // use visibility instead
        visibility: hidden ? 'hidden' : 'visible',
      }}
    />
  )
}

const Demo = () => {
  return (
    <Avatar.Root>
      <Avatar.Fallback>JD</Avatar.Fallback>
      <AvatarNextImage src="..." alt="" width={80} height={80} />
    </Avatar.Root>
  )
}

Refer to this Github Discussion for more information.

API Reference

Props

Root

Fallback

Image

RootProvider

Context

These are the properties available when using Avatar.Context, useAvatarContext hook or useAvatar hook.

API