║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║

---

title: Avatar description: Customizable Avatar component with animated borders for status indicators like "close friends" or "normal story".

<ComponentPreview name="avatar-demo" className="[&_.preview>[data-orientation=vertical]]:sm:max-w-[70%]" description="An accessible Avatar component built with Radix UI" />

Installation

<Tabs defaultValue="cli" className="w-full"> <TabsList> <TabsTrigger value="cli">CLI</TabsTrigger> <TabsTrigger value="manual">Manual</TabsTrigger> </TabsList> <TabsContent value="cli"> <PkgOptions name="avatar" /> </TabsContent> <TabsContent value="manual"> <Steps>

<Step>Install the following dependencies:</Step> <DepsOptions name="@radix-ui/react-avatar" />

<Step>Copy and paste the following code into your project.</Step>

<p> <code>avatar.tsx</code> </p> <ComponentSource name="avatar" />

<Step>Add util file</Step>

<p> <code>lib/utils.ts</code> </p>

import { ClassValue, clsx } from "clsx";
import { twMerge } from "tailwind-merge";

export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs));
}

</Steps> </TabsContent> </Tabs>

Usage

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

<Avatar variant="close-friends">
  <AvatarImage src="https://github.com/Adityakishore0.png" alt="@Ahdeetai" />
  <AvatarFallback>AK</AvatarFallback>
</Avatar>

Examples

Default

<Avatar variant="none">
  <AvatarImage src="https://github.com/Adityakishore0.png" alt="@Ahdeetai" />
  <AvatarFallback>CN</AvatarFallback>
</Avatar>

Close Friends

<Avatar variant="close-friends">
  <AvatarImage src="https://github.com/Adityakishore0.png" alt="@Ahdeetai" />
  <AvatarFallback>AK</AvatarFallback>
</Avatar>

Normal (Instagram style)

<Avatar variant="normal">
  <AvatarImage src="https://github.com/Adityakishore0.png" alt="@Ahdeetai" />
  <AvatarFallback>CN</AvatarFallback>
</Avatar>

API Reference

Avatar

The root container for the Avatar component.

Props

<PropsTable rows={[ { prop: "variant", type: "close-friends" | "normal" | "none", default: "none", description: "Controls the style variant of the avatar. Used in Avatar." }, { prop: "src", type: "string", default: "—", description: "Image source URL. Used in AvatarImage." }, { prop: "alt", type: "string", default: "—", description: "Accessible alt text for the image. Used in AvatarImage." }, { prop: "children", type: "ReactNode", default: "required", description: "Nested content. Used in Avatar and AvatarFallback." }, { prop: "className", type: "string", default: "—", description: "Optional styling class. Used in Avatar, AvatarImage, and AvatarFallback." } ]} />

║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║