react-principles

GitHub

Avatar

User identity visual with image fallback initials.

01 Live Demo

UserUserUserFallback

02 Code Snippet

src/ui/Avatar.tsx
import { Avatar } from "@/ui/Avatar";

<Avatar.Root size="lg">
  <Avatar.Image src="https://i.pravatar.cc/120" alt="Profile" />
  <Avatar.Fallback>JD</Avatar.Fallback>
</Avatar.Root>

03 Copy-Paste (Single File)

Avatar.tsx
function AvatarRoot({ children }: { children: React.ReactNode }) {
  return <span className="inline-flex h-10 w-10 items-center justify-center overflow-hidden rounded-full bg-slate-100">{children}</span>;
}

type AvatarCompound = typeof AvatarRoot & { Root: typeof AvatarRoot };
export const Avatar = Object.assign(AvatarRoot, { Root: AvatarRoot }) as AvatarCompound;
react-principles

Getting Started

Components