Get Started
Core ComponentsUpdated May 3, 2026

Avatar

Image and fallback identity primitives.

#Default usage

Avatar sizesFallback initials stay legible without becoming decorative.
FDEUEnterUI logo avatarUI

#Usage

Code
import { Avatar, AvatarFallback, AvatarImage } from "@froggdesign/enter-ui";

export function Example() {
  return (
    <>
      <Avatar size="sm"><AvatarFallback>FD</AvatarFallback></Avatar>
      <Avatar><AvatarFallback>EU</AvatarFallback></Avatar>
      <Avatar><AvatarImage alt="EnterUI logo avatar" src="/enterui-logo-square.png" /></Avatar>
      <Avatar size="lg"><AvatarFallback>UI</AvatarFallback></Avatar>
    </>
  );
}

#Accessibility

AvatarImage requires alt. Use fallback text that remains meaningful when the image is unavailable.

#API

  • Avatar: size="sm", size="md", or size="lg".
  • AvatarImage: requires alt.
  • AvatarFallback: use initials or a short label.

#Styling

Every exported component accepts className when it renders an element. EnterUI styles use .eui-* classes and --eui-* variables mapped from FroggDesign theme tokens.

Edit this page