Beanheads Vue

v1.2.1

Create billions of unique characters by mixing and matching colors, hairstyles, and clothing.

Build Now

Click the character to create your beanhead.

Getting Started

Install Beanheads Vue with your preferred package manager.

npm install beanheads-vue

then, in your app:

<script setup>
import { Beanhead } from 'beanheads-vue'
</script>

<template>
  <!-- With explicit width -->
  <Beanhead width="100"/>
  
  <!-- Without width - will fill parent container -->
  <div style="width: 100px;">
    <Beanhead/>
  </div>
</template>

Example

Here's a complete example showing how to create a customized character:

<script setup>
import { Beanhead } from 'beanheads-vue'
</script>

<template>
  <div style="width: 200px;">
    <Beanhead
      body="breasts"
      eye="dizzy-eyes"
      eyebrows="normal"
      mouth="open"
      lip-color="purple"
      facial-hair="medium-beard"
      hair="long"
      hair-color="purple"
      clothing="shirt"
      clothing-color="black"
      hat="turban"
      hat-color="blue"
      face-mask-color="pink"
    />
  </div>
</template>

Props

All props are optional.

Name	Type	Default
mask	`boolean`	`false`
skin	`"light""yellow""brown""dark""red""black"`	`"light"`
body	`"chest""breasts"`	`"chest"`
eye	`"content-eyes""dizzy-eyes""happy-eyes""heart-eyes""left-twitch-eyes""normal-eyes""simple-eyes""squint-eyes""wink"`	`"normal-eyes"`
with-lashes	`boolean`	`false`
eyebrows	`"none""normal""serious""left-lowered""angry""concerned"`	`"none"`
mouth	`"grin""lips""sad""serious""open""tongue"`	`"grin"`
lip-color	`"red""purple""pink""turquoise""green"`	`"red"`
facial-hair	`"none""stubble""medium-beard"`	`"none"`
hair	`"none""afro""balding""bob""bun""buzz""long""pixie""short"`	`"none"`
hair-color	`"blonde""orange""black""white""brown""blue""pink""green""red""purple"`	`"white"`
clothing	`"none""naked""dress""dress-shirt""shirt""tank-top""v-neck"`	`"none"`
clothing-color	`"white""blue""black""green""red""pink"`	`"white"`
clothing-graphic	`"none""vue""nuxt""redwood""react""gatsby""graphql"`	`"none"`
hat	`"none""beanie""turban"`	`"none"`
hat-color	`"white""blue""black""green""red""pink"`	`"white"`
accessory	`"none""round-glasses""tiny-glasses""shades"`	`"none"`
face-mask	`boolean`	`false`
face-mask-color	`"white""blue""black""green""red""pink"`	`"white"`

License

This project is licensed under the MIT License.