Components / Data display
Avatar
Displays a user or organization identity.
Preview
DU
1import { Avatar, AvatarFallback } from "@/components/ui/avatar"2
3export function AvatarDemo() {4 return (5 <Avatar>6 <AvatarFallback>DU</AvatarFallback>7 </Avatar>8 )9}small
The small style of this component.
DU
1import { Avatar, AvatarFallback } from "@/components/ui/avatar"2
3export function AvatarDemo() {4 return (5 <Avatar>6 <AvatarFallback>DU</AvatarFallback>7 </Avatar>8 )9}large
The large style of this component.
DU
1import { Avatar, AvatarFallback } from "@/components/ui/avatar"2
3export function AvatarDemo() {4 return (5 <Avatar>6 <AvatarFallback>DU</AvatarFallback>7 </Avatar>8 )9}Installation
Add the source directly to your project with the shadcn CLI.
npx shadcn@latest add qentrah/DUI/avatarUsage
Install the component, import it from your configured UI directory, and adapt the source to your product. Open the source panel under any example to copy that exact variant.