Root
Tools
Components
- Accordion
- Alert
- Alert Dialog
- Autocomplete
- Avatar
- Badge
- Breadcrumb
- Button
- Card
- Checkbox
- Checkbox Group
- Collapsible
- Combobox
- Command
- Dialog
- DropdownNew
- 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
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
bunx --bun shadcn@latest add @shaddercn/avatar
Usage
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"<Avatar>
<AvatarImage src="/avatars/01.png" alt="User avatar" />
<AvatarFallback>JD</AvatarFallback>
</Avatar>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>
);
}