Avatar
An image element with a fallback for representing the user.
Avatar wraps the Base UI
Avatar primitive, derives its box,
type and group geometry from --avatar-size, and marks each part with
data-slot.
Installation
npx shadcn@latest add @kosori/avatarExample
avatar-example.tsx
LT
import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
const AvatarExample = () => (
<Avatar>
<AvatarImage
alt='Luke Tracy'
src='https://images.unsplash.com/photo-1543610892-0b1f7e6d8ac1?w=128&h=128&dpr=2&q=80'
/>
<AvatarFallback>LT</AvatarFallback>
</Avatar>
);
export default AvatarExample;
Usage
import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
const AvatarDemo = () => (
<Avatar>
<AvatarImage alt='Kosori' src='https://github.com/kosori.png' />
<AvatarFallback>KO</AvatarFallback>
</Avatar>
);