Rad UI is still under active development. You are free to use it in your projects, but expect breaking changes. 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.