Blobz

Overview

Blobz is an open-source SVG avatar library that generates expressive default avatars from user IDs. A stable ID with the same palette always returns the same avatar, so there are no uploaded images to store. It is MIT licensed and available as a React package, as source-owned shadcn components, or through a hosted image API.

The React package (@blobz/react) requires React 19 or later, renders locally and needs no global stylesheet. The shadcn registry provides 10 items, from avatar primitives to ready-made blocks for account menus, team rosters and people tables. The React and shadcn toolkits are free; the hosted image URL API is offered as paid Plus and Pro plans.

Features

• Deterministic avatars: The same seed and settings produce the same SVG across sessions and surfaces.
• Brand colors: Custom palettes so avatars match the app's design.
• Avatar primitives: Base UI avatar parts with Blobz fallbacks, images, status and groups.
• Identity components: Profile rows, avatar chips with an accessible remove action, profile cards and testimonial cards.
• Ready blocks: Account menu, team list, person selector, group chat panel and user table.
• Hosted API: An image URL per user for stacks that cannot use the React package.
• Playground: Preview names and palettes in the browser before installing.

Tech stack

• React 19+, SVG
• Base UI, class-variance-authority, lucide-react
• shadcn registry

Registry

Install via the shadcn CLI registry:

npx shadcn@latest add @blobz/component-name