Celestograph Avatar
Generated profile picture avatar painted from a person's name instead of initials: the name seeds a Celestograph plate, so each user keeps the same default avatar with nothing stored.
pnpm dlx shadcn add @01orbital/celestograph-avatarThe source comes with full access.
One payment of $149 opens the source right here and lets the CLI install every paid component, with lifetime updates.
Usage
import { CelestographAvatar } from "@/components/celestograph/celestograph-avatar"
const NAMES = ["Sally", "Yuri", "Mae"]
// Each name draws its own face; three in a stack show the spread.
export default function CelestographAvatarDemo() {
return (
<div className="flex -space-x-5">
{NAMES.map((name) => (
<CelestographAvatar
key={name}
name={name}
size={120}
className="ring-4 ring-background"
/>
))}
</div>
)
}API reference
A round painted plate used as an avatar fallback, a picture rather than initials on gray. The name is the seed, so the same person keeps the same face on every machine, with nothing stored and no request made.
Hidden from assistive tech by default.
Prop
Type
It also accepts the HTML attributes of the element it renders.
Dependencies
npm: cn. The CLI installs them for you.
Registry pieces it installs with it: