Astro-native Gravatar components for production sites

Why Astro Gravatar

Built for fast adoption

Astro-native API surface

Use focused components and utility helpers without wrapping another client-side widget layer.

Production-friendly defaults

Lazy loading, responsive imagery, and clean fallback behavior come out of the box.

Profile-aware when you need it

Stay lightweight for simple avatars, or pull richer profile information for cards and links.

Bun-first workflow

The package, docs, and release flow stay aligned with the Bun-based monorepo that ships it.

The three components that carry the package

GravatarAvatar

Compact, reliable avatar rendering

Render avatars with sensible defaults, fallback modes, and responsive sizing in a single line.

GravatarProfileCard

Profile cards without extra plumbing

Surface a public profile, avatar, and supporting details with one Astro component.

Junglei Kim

GravatarQR

QR codes that stay on-brand

Generate shareable profile QR codes with icon styles and campaign parameters when you need them.

Scan to view profile

Adopt it in about 30 seconds

Minimal setup

Install, import, render.

1. Install the package in your Astro project.
2. Import the component you need in a page or content module.
3. Pass an email and style it like the rest of your site.

30-second example

---
import GravatarAvatar from 'astro-gravatar';
---

<GravatarAvatar email="user@example.com" size={80} class="rounded-full" />

Start from the right doc

InstallationGet the package into a working Astro project.Quick StartCopy the minimum setup for avatars, cards, and QR codes.Basic UsageSee practical patterns for teams, profiles, and media blocks.Component ReferenceCheck props, defaults, and example usage for the core components.UtilitiesUse hashing, URL builders, profile helpers, and cache utilities.TroubleshootingUnblock common fallback, auth, and profile resolution issues fast.

Support and operating links

Need help or want to verify the package?

Use the docs to ship, then rely on GitHub for support and release context.

View on npmBrowse repositoryOpen an issue