A lightweight, framework-agnostic profile picture component built with Lit Web Components

Profile Picture UI

@grasco/profile-picture is a lightweight (~6KB gzipped) profile picture component library built with Lit Web Components. It works natively in any framework without wrappers, adapters, or peer dependencies.

Key Features

Tiny bundle — ~6KB gzipped, tree-shakeable ESM
Zero framework dependencies — built on native Web Components via Lit
Fully customizable — variants (circle, rounded, square), badges, rings, presence indicators, glow effects, and more
Native lazy loading — images load only when visible
TypeScript types — full type definitions included
Tailwind compatible — renders in Light DOM for seamless Tailwind utility class support
Framework support — first-class support for React, Vue, Angular, and Svelte

Quick Start

import { ProfilePicture } from '@grasco/profile-picture';

function App() {
  return (
    <ProfilePicture
      src="https://example.com/avatar.png"
      alt="John Doe"
      size="lg"
      variant="circle"
      border
      borderColor="white"
    />
  );
}