Principles
Rad UI is under active development and looking for contributors to shape the future of the library. If you'd like to contribute to Rad UI, please check out Getting Started

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

AvatarRUAA
import Avatar from "@radui/ui/Avatar"

const AvatarExample = () => (
    <div style={{ display: 'flex', gap: 20 }}>
        <Avatar src="https://i.pravatar.cc/1000" />
        <Avatar fallback="RU" />
        <Avatar fallback="AA" />
    </div>
)
  • Adds a fallback if the image is not available
  • SSR compatible
PropTypeDefaultDescription
srcstringnullURL of the image to be displayed as the avatar.
fallbackstringnullText initials or placeholder displayed when the image fails to load or if no src is provided.