Getting Started

Follow these steps to go from zero to a rendered avatar using Avatune’s component packages. The examples below use React, but the same flow applies to Vue, Svelte, Vanilla JS, and React Native (see the Frameworks section in the sidebar for framework-specific snippets).

Install the renderer + a theme

Use your preferred package manager to install the renderer for your framework and at least one theme:

# yarn
yarn add @avatune/react @avatune/yanliu-theme

# bun
bun add @avatune/react @avatune/yanliu-theme

# npm
npm install @avatune/react @avatune/yanliu-theme

# pnpm
pnpm add @avatune/react @avatune/yanliu-theme

Render your first avatar

Import the Avatar component and the theme, then pass a seed to generate a deterministic avatar:

import { Avatar } from '@avatune/react'
import theme from '@avatune/yanliu-theme/react'

export function ExampleAvatar() {
  return (
    <Avatar
      theme={theme}
      seed="user@example.com"
      size={200}
    />
  )
}

Avatars render as inline SVG, so they respond instantly to prop changes (size, colors, parts, etc.).

Customize the look

Each renderer exposes the same prop surface:

• Select specific parts by name (hair="braids", eyes="happy")
• Override colors with CSS values (hairColor="#ff6b6b")
• Provide layout tweaks via className / class / style

Themes ship with documented part names inside their respective docs (e.g., packages/yanliu-theme).

Explore more frameworks

Need another stack? Head to:

• packages/react-native for mobile apps
• packages/vue, packages/svelte, packages/vanilla for web alternatives

Each page includes installation commands and live previews showing the same seed as the code sample.

Next steps

• Browse available themes under Themes for different art styles.
• Call the REST API to render avatars server-side without bundling themes.
• Experiment with Predictors (hair color, length, skin tone) to seed avatar options from a photo.

For deeper customization, including mixed assets or a new theme, use the relevant package docs in the sidebar.