Avatar

An image element with a fallback for representing the user.

$ npx ruma-ui add avatar

Installation

npx ruma-ui add avatar

Usage

import { Avatar, AvatarImage, AvatarFallback } from "@/components/ui/avatar";

export default function AvatarDemo() {
  return (
    <div className="flex gap-4 items-center">
      <Avatar>
        <AvatarImage src="https://github.com/shadcn.png" alt="@shadcn" />
        <AvatarFallback>CN</AvatarFallback>
      </Avatar>
      <Avatar>
        <AvatarFallback>RM</AvatarFallback>
      </Avatar>
    </div>
  );
}

API Reference

Prop	Type	Default	Description
src	string	undefined	Image source URL.
alt	string	undefined	Alternative text.