Avatar

Shows an image or initials for a person.

avatar-basic-demo.tsx

import { Avatar } from "@/components/vip-ui/avatar";export function AvatarBasicDemo() {  return (    <Avatar      name="Maya Chen"      src="https://images.unsplash.com/photo-1534528741775-53994a69daeb?w=96&h=96&fit=crop"    />  );}

Installation

CLI

Manual

The CLI adds the files, packages, theme variables, and Tailwind plugin that this component uses. Before you run it, set up your project.

npm

yarn

pnpm

bun

pnpm dlx shadcn@latest add https://vip-ui.dev/r/vip-avatar.json

Sizes

avatar-sizes-demo.tsx

import { Avatar } from "@/components/vip-ui/avatar";export function AvatarSizesDemo() {  return (    <div className="flex items-center gap-4">      <Avatar name="Amina Shah" size="xs" />      <Avatar name="Amina Shah" size="sm" />      <Avatar name="Amina Shah" size="md" />      <Avatar name="Amina Shah" size="lg" />      <Avatar name="Amina Shah" size="xl" />    </div>  );}

Fallback

Initials show until the image loads, and if it fails. Set initials="" to show a person icon.

avatar-fallback-demo.tsx

import { Avatar } from "@/components/vip-ui/avatar";export function AvatarFallbackDemo() {  return (    <div className="flex items-center gap-4">      <Avatar name="Maya Chen" src="/avatars/missing.png" />      <Avatar name="Amina Shah" />      <Avatar name="Leonardo da Vinci" initials="LV" />      <Avatar name="Guest" initials="" />    </div>  );}

Group

Give AvatarGroup an aria-label. Show the people not shown as a count, such as +2.

avatar-demo.tsx

import { Avatar, AvatarGroup } from "@/components/vip-ui/avatar";export function AvatarDemo() {  return (    <AvatarGroup aria-label="Reviewers">      <Avatar        name="Maya Chen"        src="https://images.unsplash.com/photo-1534528741775-53994a69daeb?w=96&h=96&fit=crop"      />      <Avatar        name="Amina Shah"        className="bg-primary text-primary-foreground"      />      <Avatar        name="Leo Park"        className="bg-success-subtle text-success-foreground"      />      <Avatar        name="2 more reviewers"        initials="+2"        className="bg-muted text-muted-foreground"      />    </AvatarGroup>  );}

API reference

name: stringRequired: Accessible name. Avatar takes the initials from it.
src: string: Image URL. Avatar shows initials if the image is missing or does not load.
initials: string: Replaces the initials that Avatar takes from name. Set "" to show a person icon.
size: "xs" | "sm" | "md" | "lg" | "xl" = "md": Diameter of the avatar: 24, 32, 40, 48, or 64 pixels. The initials scale with it.