Shadcn/UI is a component library built on Tailwind CSS and Radix UI primitives. Unlike traditional libraries, you copy components directly into your project, giving you full control over styling and behavior.

How do I install Shadcn/UI components?

Use the shadcn CLI to add components: npx shadcn@latest add [component-name]. This copies the component files directly into your project.

Can I customize Shadcn/UI components?

Yes, since components are copied into your project, you have complete control. Modify styling, add props, or change behavior as needed.

Is Shadcn/UI free to use?

Yes, Shadcn/UI is completely free and open-source. Components are MIT licensed and you can use them in any project, including commercial ones.

Avatar Component - shadcn/ui Examples

About the shadcn/ui Avatar Component

The Avatar component is part of shadcn/ui — a collection of accessible, copy-paste React components built with Radix UI and Tailwind CSS. Install it with `npx shadcn@latest add avatar` and copy it directly into your project.

Avatar Component — Frequently Asked Questions

How does shadcn Avatar handle broken image URLs?

The `<AvatarFallback>` renders automatically when the image fails to load. Show initials or an icon: `<AvatarFallback>JD</AvatarFallback>`.

How do I create an avatar group with overlapping avatars?

Use negative margin and a flex container: `<div className="flex -space-x-2">{users.map(u => <Avatar key={u.id}>...</Avatar>)}</div>`.

How do I add a status indicator to a shadcn Avatar?

Wrap in a relative div and add a small colored dot: `<div className="relative"><Avatar /><span className="absolute bottom-0 right-0 h-3 w-3 bg-green-500 rounded-full border-2 border-white" /></div>`.