Avatar

Displays a user avatar with image support and fallback initials.

Preview

Installation

npx drivn add avatar

Usage

1 import { Avatar } from "@/components/ui/avatar"
2 
3 export default function Page() {
4   return (
5     <Avatar
6       src="/avatar.jpg"
7       alt="John Doe"
8       fallback="JD"
9     />
10   )
11 }

API Reference

Prop	Type	Default	Description
`src`	string	—	URL of the avatar image
`alt`	string	—	Alt text for the avatar image
`fallback`	string	—	Text displayed when no image is provided (first 2 characters, uppercased)
`size`	"sm" \| "md" \| "lg" \| "xl"	"md"	Size of the avatar
`className`	string	—	Additional CSS classes to apply

1	import { Avatar } from "@/components/ui/avatar"
2
3	export default function Page() {
4	return (
5	<Avatar
6	src="/avatar.jpg"
7	alt="John Doe"
8	fallback="JD"
9	/>
10	)
11	}