blobatar

Overview

blobatar generates deterministic geometric avatars from any string. The same name always produces the same face, so a user recognized in a chat thread looks the same in the sidebar. The core library has zero dependencies, weighs about 4.4 KB gzipped, offers 10 silhouettes, and keeps 4.5:1 contrast across every hue. It is MIT licensed.

It ships as the blobatar and @blobatar/react packages and as a shadcn registry with six items. The main registry item is an Avatar that falls back to a blobatar when a user has no picture. Without the animate prop, a blobatar renders as a single <img>, and an online editor lets developers tune every trait.

Features

• Fallback avatar: A shadcn Avatar that shows a generated blobatar when no image is available.
• Presence avatar: Online, away, offline and thinking states, with a presence dot, unread badge and blinking face.
• Agent list: A sidebar group of running agents, each with a face derived from its name and a status line.
• User table: Renders faces as static images so long lists stay one node per face.
• Group chat: Groups consecutive messages under one face, with a facepile and typing indicator.
• Password field: A face that watches the caret and turns sleepy when the password is revealed.
• Optional motion: Hover animation via blobatar/motion.css.

Tech stack

• TypeScript, React
• shadcn registry, with llms.txt and an OpenAPI spec published

Registry

Install via the shadcn CLI registry:

npx shadcn@latest add @blobatar/component-name