Devie UI
Version: 2026-02-14

<Avatar />

JDMKSMRB

The Avatar component extends Base UI's Avatar. It's a simple component displaying an image, and a fallback to text if the image is not present. We use the new squircle shape property to have something a bit more original.

Installation

Here is the component implementation code that you can copy to your project:

// https://devie-ui.com/components/avatar
// https://base-ui.com/react/components/avatar
 
import { Avatar as BaseAvatar } from "@base-ui/react/avatar";
import clsx from "clsx";
import styles from "./Avatar.module.scss";
 
function Root({ className, ...props }: BaseAvatar.Root.Props) {
  return (
    <BaseAvatar.Root className={clsx(styles.root, className)} {...props} />
  );
}
 
function Image({ className, ...props }: BaseAvatar.Image.Props) {
  return (
    <BaseAvatar.Image className={clsx(styles.image, className)} {...props} />
  );
}
 
function Fallback({ className, ...props }: BaseAvatar.Fallback.Props) {
  return (
    <BaseAvatar.Fallback
      className={clsx(styles.fallback, className)}
      {...props}
    />
  );
}
 
const Avatar = {
  Root,
  Image,
  Fallback,
};
 
namespace Avatar {
  export namespace Root {
    export type Props = BaseAvatar.Root.Props;
  }
  export namespace Image {
    export type Props = BaseAvatar.Image.Props;
  }
  export namespace Fallback {
    export type Props = BaseAvatar.Fallback.Props;
  }
}
 
export default Avatar;

Use Cases

Simple avatar with image

The basic usage shows an avatar with an image. The Avatar.Image component handles loading the image, while Avatar.Fallback is displayed while the image loads or if it fails.

JD

Avatar with fallback

When the image fails to load or isn't provided, the fallback content is displayed. This is typically used to show user initials.

JSAB

Custom sizes

The default avatar size is 48×48px. You can customize the size by passing inline styles or a custom className to the Avatar.Root component. The fallback text automatically scales thanks to CSS container queries.

JDSMACTW