Avatar

Preview

Avatar

TypeScript

bash

1npx shadcn@latest add https://fysk.dev/r/avatar.json

tsx

1import { Avatar } from "@/components/ui"
2
3<Avatar src="https://github.com/ameghcoder.png" fallback="FY" />

Standard circular avatar with image and fallback.

Component

TypeScript

With Image

No Image - Fallback

Mutliple sizes of avatar.

Component

TypeScript

SSSS

AAAA

Built-in States: Integrated loading (shows a loader) and error (shows alert icon) feedback.
Auto-Initials: Automatically extracts initials from the alt prop if no image is found and no fallback is provided.
Glassmorphism: Fallbacks and state overlays feature subtle blurs and modern backgrounds.
Responsive Sizing: Six pre-configured sizes from xs to 2xl.

The Avatar component accepts the following props:

Prop	Type	Default	Description
`size`	`"xs" \| "sm" \| "md" \| "lg" \| "xl" \| "2xl"`	`"md"`	The visual size of the avatar.
`variant`	`"default" \| "outline" \| "ghost" \| "glass"`	`"default"`	Visual style of the border/container.
`state`	`"idle" \| "loading" \| "error"`	`"idle"`	Current interaction or async state.
`src`	`string`	-	Image source URL.
`alt`	`string`	-	Accessible name and source for auto-initials.
`fallback`	`React.Node`	-	Custom content for the fallback state.

Accepts all standard props from @radix-ui/react-avatar.