Park UI Logo
GitHub
Components
Avatar

Avatar

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

Usage

JD
import { Avatar, type AvatarProps } from '~/components/ui'

export const Demo = (props: AvatarProps) => {
  return <Avatar src="https://i.pravatar.cc/300" name="John Doe" {...props} />
}

Examples

Name Only

When only a name is supplied, the initials are displayed.

CS
<Avatar name="Christian Schröter" />

No User Data

Displays a default avatar in the absence of user data.

User Icon
<Avatar />

Installation

npx @park-ui/cli components add avatar