@avatune/kyute-theme

Avatune

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, React Native, Angular, SolidJS, Vue, Svelte, and Vanilla JavaScript — plus native rendering on Apple platforms with Swift.

Quick Start

Install Theme and Renderer

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

Use Native SVG Components

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>
  )
}

Available Themes

Every theme supports React, React Native, Angular, SolidJS, Vue, Svelte, and Vanilla JavaScript — and ships as a Swift module for Apple platforms.

Framework Renderers

Swift is developed in swift/ and released from avatune/avatune-swift, because Swift Package Manager resolves a package from a repository root. See swift/README.md for installation and usage.

Predictors

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

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

Live Demo

Explore all themes and frameworks in the unified Storybook:

bun run build && bun storybook

This launches a single Storybook instance showcasing all themes across the web renderers. The Swift package ships the equivalent as a native browser app:

swift run -c release --package-path swift Avatune

Development

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

Creating Custom Themes

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()

License

See LICENSE.md for license information.

Credits

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