Avatar

Name: Rad UI
Author: Rad UI Team

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

preview

React
"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;

Features

Adds a fallback if the image is not available
SSR compatible

Root

The root component for the Avatar.

Prop	Type	Default
className	string	--
customRootClass	string	--
asChild	boolean	false
children	React.ReactNode	null
size	string	``
variant	string	``
color	string	``

Image

The image component for the Avatar.

Prop	Type	Default
src	string	--
alt	string	''

Fallback

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

Prop	Type	Default
children	React.ReactNode	--
className	string	--
asChild	boolean	false

Edit this page on GitHub →