Avatars are used to represent a user or a brand. They are used in the header, sidebar, and in the chat.

KL
"use client"
import Avatar from "@radui/ui/Avatar"

const AvatarExample = () => {
    return <Avatar.Root>
        <Avatar.Image src="https://i.pravatar.cc/1000" />
        <Avatar.Fallback>KL</Avatar.Fallback>
    </Avatar.Root>
}

export default AvatarExample;
  • Adds a fallback if the image is not available
  • SSR compatible

The root component for the Avatar.

PropTypeDefault

className

string--

customRootClass

string--

asChild

boolean

false

children

React.ReactNodenull

size

string``

variant

string``

color

string``

The image component for the Avatar.

PropTypeDefault

src

string--

alt

string--

The fallback component for the Avatar when the image fails to load.

PropTypeDefault

children

React.ReactNode--

className

string--
Edit this page on GitHub