Components
- Accordion
- Alert
- Alert Dialog
- Autocomplete
- Avatar
- Badge
- Breadcrumb
- Button
- Card
- Checkbox
- Checkbox Group
- Collapsible
- Combobox
- CommandNew
- Dialog
- Empty
- Field
- Fieldset
- Form
- Frame
- Group
- Input
- Input Group
- Kbd
- Label
- Menu
- Meter
- Number Field
- Pagination
- Popover
- Preview Card
- Progress
- Radio Group
- Scroll Area
- Select
- Separator
- Sheet
- Skeleton
- Slider
- Spinner
- Switch
- Table
- Tabs
- Textarea
- Toast
- Toggle
- Toggle Group
- Toolbar
- Tooltip
Resources
Avatar
An image element with a fallback for representing the user.
LT
import {
Avatar,
AvatarFallback,
AvatarImage,
} from "@/components/ui/avatar";
export default function Particle() {
return (
<Avatar>
<AvatarImage
alt="Luke Tracy"
src="https://images.unsplash.com/photo-1543610892-0b1f7e6d8ac1?w=128&h=128&dpr=2&q=80"
/>
<AvatarFallback>LT</AvatarFallback>
</Avatar>
);
}
Installation
pnpm dlx shadcn@latest add @coss/avatar
Usage
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"<Avatar>
<AvatarImage src="/avatars/01.png" alt="User avatar" />
<AvatarFallback>JD</AvatarFallback>
</Avatar>API Reference
Avatar
Root component. Styled wrapper for Avatar.Root from Base UI with default size of 32px (8 units) and rounded-full styling.
AvatarImage
Image element for the avatar. Styled wrapper for Avatar.Image from Base UI.
AvatarFallback
Fallback content displayed when the image fails to load. Styled wrapper for Avatar.Fallback from Base UI with muted background.
Examples
Fallback Only
LT
import { Avatar, AvatarFallback } from "@/components/ui/avatar";
export default function Particle() {
return (
<Avatar>
<AvatarFallback>LT</AvatarFallback>
</Avatar>
);
}
Different Sizes
AVAVAV
import {
Avatar,
AvatarFallback,
AvatarImage,
} from "@/components/ui/avatar";
export default function Particle() {
return (
<div className="flex items-center gap-4">
<Avatar>
<AvatarImage
alt="User"
src="https://images.unsplash.com/photo-1543610892-0b1f7e6d8ac1?w=96&h=96&dpr=2&q=80"
/>
<AvatarFallback>AV</AvatarFallback>
</Avatar>
<Avatar className="size-12">
<AvatarImage
alt="User"
src="https://images.unsplash.com/photo-1543610892-0b1f7e6d8ac1?w=144&h=144&dpr=2&q=80"
/>
<AvatarFallback>AV</AvatarFallback>
</Avatar>
<Avatar className="size-16">
<AvatarImage
alt="User"
src="https://images.unsplash.com/photo-1543610892-0b1f7e6d8ac1?w=192&h=192&dpr=2&q=80"
/>
<AvatarFallback>AV</AvatarFallback>
</Avatar>
</div>
);
}
Different Radius
AVAVAV
import {
Avatar,
AvatarFallback,
AvatarImage,
} from "@/components/ui/avatar";
export default function Particle() {
return (
<div className="flex items-center gap-4">
<Avatar className="rounded-md">
<AvatarImage
alt="User"
src="https://images.unsplash.com/photo-1543610892-0b1f7e6d8ac1?w=128&h=128&dpr=2&q=80"
/>
<AvatarFallback>AV</AvatarFallback>
</Avatar>
<Avatar className="rounded-xl">
<AvatarImage
alt="User"
src="https://images.unsplash.com/photo-1543610892-0b1f7e6d8ac1?w=128&h=128&dpr=2&q=80"
/>
<AvatarFallback>AV</AvatarFallback>
</Avatar>
<Avatar className="rounded-full">
<AvatarImage
alt="User"
src="https://images.unsplash.com/photo-1543610892-0b1f7e6d8ac1?w=128&h=128&dpr=2&q=80"
/>
<AvatarFallback>AV</AvatarFallback>
</Avatar>
</div>
);
}
Group Avatars
U1U2U3
import {
Avatar,
AvatarFallback,
AvatarImage,
} from "@/components/ui/avatar";
export default function Particle() {
return (
<div className="-space-x-[0.6rem] flex">
<Avatar className="ring-2 ring-background">
<AvatarImage
alt="U1"
src="https://images.unsplash.com/photo-1543610892-0b1f7e6d8ac1?w=96&h=96&dpr=2&q=80"
/>
<AvatarFallback>U1</AvatarFallback>
</Avatar>
<Avatar className="ring-2 ring-background">
<AvatarImage
alt="U2"
src="https://images.unsplash.com/photo-1628157588553-5eeea00af15c?w=96&h=96&dpr=2&q=80"
/>
<AvatarFallback>U2</AvatarFallback>
</Avatar>
<Avatar className="ring-2 ring-background">
<AvatarImage
alt="U3"
src="https://images.unsplash.com/photo-1655874819398-c6dfbec68ac7?w=96&h=96&dpr=2&q=80"
/>
<AvatarFallback>U3</AvatarFallback>
</Avatar>
</div>
);
}