Avatar
Compact circular avatar with motion on enter, hover, and tap. Shows an image or fallback text at a fixed 42×42 size.
Live preview
Spring in · Hover lifts the ring · Image fades to fit
Install
v0
Ship the bundle to v0 to restyle the ring, timing, or layout with prompts.
Usage
Use avatar as Avatar so JSX stays PascalCase. See tile 05 for props and dependencies.
import { avatar as Avatar } from "@/components/ui/avatar";
export function ProfileChip() {
return (
<a
className="inline-flex rounded-full focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2"
href="https://avatars.githubusercontent.com/u/180170746?v=4"
rel="noopener noreferrer"
target="_blank"
>
<Avatar src="https://avatars.githubusercontent.com/u/180170746?v=4" />
</a>
);
}API & dependencies
Single named export; optional image URL, fallback string, and className.
src (optional)
Image URL for the avatar. When set, a motion.img fills the circle with a short opacity fade-in. When omitted, the fallback is shown.
fallback (optional)
String shown inside the circle when src is missing (default "?"). Styled as semibold initials on the primary fill.
className (optional)
Merged onto the root motion.div with cn(). The base size is fixed at 42×42 (h-[42px] w-[42px]) with text-sm.
framer-motion
Spring entrance on the root, image/fallback staggered fades, hover scale and glow, tap compress, and a repeating pulse ring on hover.
Notes
The image uses a fixed alt of "Avatar"; override patterns are not built in—swap to your own img if you need per-user alt text.
shadcn registry
Registry item lists framer-motion so shadcn@latest add pulls the peer with the file.