registry:component

Avatar

v1.0.0ga

User avatar primitive with fallback initials support.

Registry Endpoint

Open JSON

https://registry.aavya.com/r/ui-avatar.json

npx shadcn@latest add https://registry.aavya.com/r/ui-avatar.json

Live Preview

Avatar with fallback initials

Usage Snippet

import Avatar from '@/components/ui/avatar.tsx'

export default function Example() {
  return (
    <div className="p-6">
      <Avatar />
    </div>
  )
}

Source Preview

'use client'

import * as React from 'react'

import * as AvatarPrimitive from '@radix-ui/react-avatar'

import { cn } from '@/lib/utils'

function Avatar({ className, ...props }: React.ComponentProps<typeof AvatarPrimitive.Root>) {
  return (
    <AvatarPrimitive.Root
      data-slot='avatar'
      className={cn('relative flex size-8 shrink-0 overflow-hidden rounded-full', className)}
      {...props}
    />
  )
}

function AvatarImage({ className, ...props }: React.ComponentProps<typeof AvatarPrimitive.Image>) {
  return (
    <AvatarPrimitive.Image data-slot='avatar-image' className={cn('aspect-square size-full', className)} {...props} />
  )
}

function AvatarFallback({ className, ...props }: React.ComponentProps<typeof AvatarPrimitive.Fallback>) {
  return (
    <AvatarPrimitive.Fallback
      data-slot='avatar-fallback'
      className={cn('bg-muted flex size-full items-center justify-center rounded-full', className)}
      {...props}
    />
  )
}

export { Avatar, AvatarImage, AvatarFallback }