>skeehn

avatar

User image with dither fallback

Coreavatar.css

Installation

$npx skeehn add avatar

Preview

SK
AI
LG
XL

Props

PropTypeDefaultDescription
srcstringImage source URL
altstringAlt text for the image
fallbackstringFallback initials when image fails
size'sm' | 'md' | 'lg' | 'xl''md'Avatar size

Usage

avatar.tsx
1import { Avatar } from '@skeehn/react';23export function UserList() {4  return (5    <div className="flex gap-2">6      <Avatar fallback="SK" size="sm" />7      <Avatar fallback="AI" size="md" />8      <Avatar src="/photo.jpg" alt="User" size="lg" />9    </div>10  );11}