Components
Avatar
An easily stylable avatar component.
CNER
CNLRER
Installation
pnpm dlx shadcn@latest add https://basecn.dev/r/avatar.jsonExamples
Default
CNLRER
Initials
CNLER
Fallback
CN
Size
CNLRER
Shape
CNLRER
CN
Ring
ERLR
CN
Status
CN
CN
CN
CN
Badge
CN
3
CN
CN
CN
Group
+5TBDAERLRCN
Migrating from Radix UI
Common Migration Steps
All components share several migration patterns when moving from Radix UI to Base UI. Before proceeding with component-specific changes, review the essential migration patterns.
Familiarizing yourself with these patterns will make the component-specific migration steps much clearer.
AvatarFallback Delay
In Radix UI, you can provide a delayMs prop to delay its rendering so it only renders for those with slower connections.
import { Avatar, AvatarFallback } from "@/components/ui/avatar"
<Avatar>
<AvatarImage src="https://github.com/shadcn.png" alt="@shadcn" />
<AvatarFallback delayMs={1000}>CN</AvatarFallback>
</Avatar>With Base UI, you can pass the delay prop to achieve the same effect.
import { Avatar, AvatarFallback } from "@/components/ui/avatar"
<Avatar>
<AvatarImage src="https://github.com/shadcn.png" alt="@shadcn" />
<AvatarFallback delay={1000}>CN</AvatarFallback>
</Avatar>