Production-ready avatar system with AI-powered generation and framework-native components.

Generate beautiful, customizable avatars with machine learning prediction or manual configuration. Works seamlessly with React, Vue, Svelte, and Vanilla JavaScript.

• AI-Powered Generation - Train and use TensorFlow.js models for intelligent avatar attribute prediction (hair color, skin tone, hair length)
• Framework Native - First-class support for React, Vue, Svelte, and Vanilla JS with framework-specific components
• Theme System - Multiple professionally designed themes with full customization support
• Type Safe - Built with TypeScript for complete type safety across all packages
• Production Ready - Optimized builds with Rspack, tree-shakeable, and performant

npm install @avatune/pacovqzz-theme @avatune/react
# or
yarn add @avatune/fatin-verse-theme @avatune/react
# or
pnpm add @avatune/micah-theme @avatune/react

import { Avatar } from '@avatune/react'
import pacovqzz from '@avatune/pacovqzz-theme/react'
import fatinverse from '@avatune/fatin-verse-theme/react'
import micah from '@avatune/micah-theme/react'

function App() {
  return (
    <div className="flex justify-between items-center">
      <Avatar theme={pacovqzz} seed="seed" size={200} />
      <Avatar theme={fatinverse} seed="seed" size={200} />
      <Avatar theme={micah} seed="seed" size={200} />
    </div>
  )
}

All themes support React, Vue, Svelte, and Vanilla JavaScript.

Train custom TensorFlow.js models or use pre-trained predictors:

Models are trained in Python and exported to TensorFlow.js for browser inference.

Explore all themes and frameworks in the unified Storybook:

bun run build && bun storybook

This launches a single Storybook instance showcasing all themes across React, Vue, Svelte, and Vanilla implementations.

Built with a modern monorepo setup:

• Turborepo - Intelligent build system with caching
• Bun - Fast package manager and runtime
• Rspack - Lightning-fast bundler for production builds
• Biome - Fast linting and formatting

# Install dependencies
bun install

# Build all packages
bun run build

# Run all storybooks
bun storybook

Use the theme builder to create your own themes:

import type { ReactAvatarItem } from '@avatune/types'
import { createTheme, fromHead } from '@avatune/theme-builder'
import { percentage } from '@avatune/utils'

const getHeadPosition = (size: number) => ({
  x: size * percentage('8%'),
  y: size * percentage('3%'),
})

const fromHeadOffset = fromHead(getHeadPosition)

const myTheme = createTheme()
  .withStyle({ size: 500, borderRadius: '100%' })
  .addColors('hair', ['#000000', '#8B4513'])
  .addColors('body', ['#FF0000', '#00FF00'])
  .toFramework<ReactAvatarItem>()
  .withComponents('hair', {
    short: { Component: ShortHair },
    long: { Component: LongHair },
  })
  .build()

See LICENSE.md for license information.

Design assets are sourced from community creators. See individual theme packages for license and attribution.