Avatar.

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

export default function AvatarDemo() {
  return (
    <div className="flex items-center gap-4">
      <Avatar>
        <AvatarImage src="https://github.com/shadcn.png" alt="shadcn" />
        <AvatarFallback>SC</AvatarFallback>
      </Avatar>
      <Avatar className="size-12">
        <AvatarImage src="https://github.com/vercel.png" alt="Vercel" />
        <AvatarFallback>VC</AvatarFallback>
      </Avatar>
    </div>
  );
}

Installation#

With the CLI

$npx lanterncn add avatar

This also installs the Lantern theme and any Lantern UI components it depends on. The shadcn CLI works directly too: npx shadcn@latest add httptim/lantern-ui/avatar. See Installation if your project is not set up yet.

Manually

1. Install the dependencies

   npm install radix-ui

2. Copy the source into your project

   components/ui/avatar.tsx

   "use client";
   
   import * as React from "react";
   import { Avatar as AvatarPrimitive } from "radix-ui";
   
   import { cn } from "@/lib/utils";
   
   function Avatar({ className, ...props }: React.ComponentProps<typeof AvatarPrimitive.Root>) {
     return (
       <AvatarPrimitive.Root
         data-slot="avatar"
         className={cn("relative flex size-9 shrink-0 overflow-hidden rounded-full border border-input bg-secondary", className)}
         {...props}
       />
     );
   }
   
   function AvatarImage({ className, ...props }: React.ComponentProps<typeof AvatarPrimitive.Image>) {
     return <AvatarPrimitive.Image data-slot="avatar-image" className={cn("aspect-square size-full object-cover", className)} {...props} />;
   }
   
   function AvatarFallback({ className, ...props }: React.ComponentProps<typeof AvatarPrimitive.Fallback>) {
     return (
       <AvatarPrimitive.Fallback
         data-slot="avatar-fallback"
         className={cn(
           "flex size-full items-center justify-center bg-accent font-mono text-[11px] font-semibold tracking-wider text-[#b7ca9e] uppercase",
           className,
         )}
         {...props}
       />
     );
   }
   
   /** Overlapping row of avatars. Each avatar gets a ring in the background color. */
   function AvatarGroup({ className, ...props }: React.ComponentProps<"div">) {
     return (
       <div
         data-slot="avatar-group"
         className={cn("flex -space-x-2.5 *:data-[slot=avatar]:ring-2 *:data-[slot=avatar]:ring-background", className)}
         {...props}
       />
     );
   }
   
   export { Avatar, AvatarImage, AvatarFallback, AvatarGroup };

3. Update the import paths to match your project

   The source imports cn from @/lib/utils.

Usage#

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

<Avatar>
  <AvatarImage src="/player.png" alt="Player" />
  <AvatarFallback>PL</AvatarFallback>
</Avatar>

Examples#

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

export default function AvatarFallbackExample() {
  return (
    <div className="flex items-center gap-4">
      <Avatar>
        <AvatarImage src="/missing-turtle.png" alt="Turtle 07" />
        <AvatarFallback>T7</AvatarFallback>
      </Avatar>
      <Avatar>
        <AvatarFallback>OP</AvatarFallback>
      </Avatar>
      <Avatar className="size-12">
        <AvatarFallback className="bg-primary text-primary-foreground">HB</AvatarFallback>
      </Avatar>
    </div>
  );
}

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

export default function AvatarGroupExample() {
  return (
    <div className="flex items-center gap-3">
      <AvatarGroup>
        <Avatar>
          <AvatarImage src="https://github.com/shadcn.png" alt="shadcn" />
          <AvatarFallback>SC</AvatarFallback>
        </Avatar>
        <Avatar>
          <AvatarFallback>MK</AvatarFallback>
        </Avatar>
        <Avatar>
          <AvatarFallback>JD</AvatarFallback>
        </Avatar>
        <Avatar>
          <AvatarFallback className="bg-secondary text-muted-foreground">+4</AvatarFallback>
        </Avatar>
      </AvatarGroup>
      <span className="font-mono text-[10px] tracking-[0.2em] text-muted-foreground uppercase">7 signed the guestbook</span>
    </div>
  );
}