Components
- Accordion
- Alert
- Alert Dialog
- Autocomplete
- Avatar
- Badge
- Breadcrumb
- Button
- Card
- Checkbox
- Checkbox Group
- Collapsible
- Combobox
- Dialog
- Field
- Fieldset
- Form
- Frame
- Group
- Input
- Label
- Menu
- Meter
- Number Field
- Pagination
- Popover
- Preview Card
- Progress
- Radio Group
- Scroll Area
- Select
- Separator
- Sheet
- Slider
- 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 function AvatarDemo() {
return (
<Avatar>
<AvatarImage
src="https://images.unsplash.com/photo-1543610892-0b1f7e6d8ac1?w=128&h=128&dpr=2&q=80"
alt="Luke Tracy"
/>
<AvatarFallback>LT</AvatarFallback>
</Avatar>
)
}
Installation
pnpm dlx shadcn@latest add https://coss.com/ui/r/avatar.json
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 function AvatarFallbackDemo() {
return (
<Avatar>
<AvatarFallback>LT</AvatarFallback>
</Avatar>
)
}
Different Sizes
AVAVAV
import {
Avatar,
AvatarFallback,
AvatarImage,
} from "@/components/ui/avatar"
export function AvatarSizeDemo() {
return (
<div className="flex items-center gap-4">
<Avatar>
<AvatarImage
src="https://images.unsplash.com/photo-1543610892-0b1f7e6d8ac1?w=96&h=96&dpr=2&q=80"
alt="User"
/>
<AvatarFallback>AV</AvatarFallback>
</Avatar>
<Avatar className="size-12">
<AvatarImage
src="https://images.unsplash.com/photo-1543610892-0b1f7e6d8ac1?w=144&h=144&dpr=2&q=80"
alt="User"
/>
<AvatarFallback>AV</AvatarFallback>
</Avatar>
<Avatar className="size-16">
<AvatarImage
src="https://images.unsplash.com/photo-1543610892-0b1f7e6d8ac1?w=192&h=192&dpr=2&q=80"
alt="User"
/>
<AvatarFallback>AV</AvatarFallback>
</Avatar>
</div>
)
}
Different Radius
AVAVAV
import {
Avatar,
AvatarFallback,
AvatarImage,
} from "@/components/ui/avatar"
export function AvatarRadiusDemo() {
return (
<div className="flex items-center gap-4">
<Avatar className="rounded-md">
<AvatarImage
src="https://images.unsplash.com/photo-1543610892-0b1f7e6d8ac1?w=128&h=128&dpr=2&q=80"
alt="User"
/>
<AvatarFallback>AV</AvatarFallback>
</Avatar>
<Avatar className="rounded-xl">
<AvatarImage
src="https://images.unsplash.com/photo-1543610892-0b1f7e6d8ac1?w=128&h=128&dpr=2&q=80"
alt="User"
/>
<AvatarFallback>AV</AvatarFallback>
</Avatar>
<Avatar className="rounded-full">
<AvatarImage
src="https://images.unsplash.com/photo-1543610892-0b1f7e6d8ac1?w=128&h=128&dpr=2&q=80"
alt="User"
/>
<AvatarFallback>AV</AvatarFallback>
</Avatar>
</div>
)
}
Group Avatars
U1U2U3
import {
Avatar,
AvatarFallback,
AvatarImage,
} from "@/components/ui/avatar"
export function AvatarGroupDemo() {
return (
<div className="flex -space-x-[0.6rem]">
<Avatar className="ring-2 ring-background">
<AvatarImage
src="https://images.unsplash.com/photo-1543610892-0b1f7e6d8ac1?w=96&h=96&dpr=2&q=80"
alt="U1"
/>
<AvatarFallback>U1</AvatarFallback>
</Avatar>
<Avatar className="ring-2 ring-background">
<AvatarImage
src="https://images.unsplash.com/photo-1628157588553-5eeea00af15c?w=96&h=96&dpr=2&q=80"
alt="U2"
/>
<AvatarFallback>U2</AvatarFallback>
</Avatar>
<Avatar className="ring-2 ring-background">
<AvatarImage
src="https://images.unsplash.com/photo-1655874819398-c6dfbec68ac7?w=96&h=96&dpr=2&q=80"
alt="U3"
/>
<AvatarFallback>U3</AvatarFallback>
</Avatar>
</div>
)
}
Comparing with Radix / shadcn
If you’re already familiar with Radix UI and shadcn/ui, this guide highlights the small differences and similarities so you can get started with coss.com ui quickly.
Quick Checklist
- If you used
asChildon parts, switch to therenderprop