Command Palette

Search for a command to run...

Avatar

shadcn/ui

An image element with a fallback for representing the user.

import { Avatar, AvatarImage, AvatarFallback } from "@/registry/optics/avatar";<Avatar title="Optics">	<AvatarImage src="/images/logo.svg" alt="optics" />	<AvatarFallback>OP</AvatarFallback></Avatar><AvatarStack	data={[		{			image: "https://github.com/agusmayol.png",			fallback: "AM",			title: "Agus Mayol",		},		{			image: "https://github.com/clcautomation.png",			fallback: "CLC",			title: "CLC Automation",		},	]}/>

Installation

pnpm dlx shadcn@latest add https://optics.agusmayol.com.ar/r/avatar.json

Props

<Avatar />
Name
Type
className
string
title
string

<AvatarImage />
Name
Type
className
string
src
string
alt
string
<AvatarFallback />
Name
Type
className
string
<AvatarStack />
Name
Type
data
Array<{ image: string, fallback: string, title: string }>