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.

import Avatar from "@rad-ui/ui/Avatar"

const AvatarExample = () => (
    <div style={{ display: 'flex', gap: 20 }}>
        <Avatar src="https://i.pravatar.cc/1000" />
        <Avatar fallback="RU" />
        <Avatar fallback="AA" />
  • Adds a fallback if the image is not available
  • SSR compatible