Getting Started

Generate beautiful, deterministic avatars for your Vue 3 apps without fetching a single image.

What is @maxnth/gestalt?

@maxnth/gestalt is a free, open-source Vue 3 component library that renders generative avatars as inline SVG. Give it any string or number — a user id, email, or username — and it produces a unique, reproducible avatar. The same seed always renders the same result, so you get consistent profile pictures entirely from data.

Why use it?

• No assets to ship. Every avatar is generated on the fly, so there is no image folder, no CDN, and no broken links.
• Stable by design. A seed like [email protected] always produces the exact same avatar.
• Server-rendered. Built-in components emit complete inline SVG during SSR, with no client-side drawing pass.
• Flexible core. Use Vue components, framework-independent SVG generators, or the canvas helpers for custom renderers and raster export.
• Easy to extend. Bring your own rendering algorithm via the generic <Avatar> component.
• Fully typed. Written in TypeScript with declarations included.
• Zero runtime dependencies. The library only requires Vue.

Installation

pnpm add @maxnth/gestalt

npm install @maxnth/gestalt

yarn add @maxnth/gestalt

bun add @maxnth/gestalt

Requires vue >= 3.5.

Quick start

Drop a convenience component anywhere in your app:

<script setup>
import { GradientAvatar } from '@maxnth/gestalt'
</script>

<template>
  <GradientAvatar seed="[email protected]" :size="96" />
</template>

<script setup>
import { InitialsAvatar } from '@maxnth/gestalt'
</script>

<template>
  <InitialsAvatar seed="Jane Doe" :size="96" mode="double" />
</template>

<script setup>
import { IdenticonAvatar } from '@maxnth/gestalt'
</script>

<template>
  <IdenticonAvatar seed="[email protected]" :size="96" />
</template>

<script setup>
import { FlowFieldAvatar } from '@maxnth/gestalt'
</script>

<template>
  <FlowFieldAvatar seed="[email protected]" :size="96" />
</template>

Next steps

• Browse every component, variant, and interactive control in Storybook.
• Explore the gradient avatar for mesh-gradient profile pictures.
• Try the flow-field avatar for plotter-style generative lines.
• Use the initials avatar for classic placeholder avatars.
• Try the identicon avatar for GitHub-style geometric avatars.
• Learn about the low-level <Avatar> component and how to write a custom algorithm.
• Export avatars as data URLs or Blobs with the engine helpers.