MCPcopy
hub / github.com/boringdesigners/boring-avatars

github.com/boringdesigners/boring-avatars @v2.0.2 sqlite

repository ↗ · DeepWiki ↗ · release v2.0.2 ↗
42 symbols 101 edges 22 files 0 documented · 0%
README

Boring avatars

Boring avatars is a tiny JavaScript React library that generates custom, SVG-based avatars from any username and color palette.

hi

Install

npm install boring-avatars

Usage

import Avatar from 'boring-avatars';

<Avatar name="Maria Mitchell" />;

Props

Prop Type Default
size number or string 40px
square boolean false
title boolean false
name string Clara Barton
variant oneOf: marble, beam, pixel,sunset, ring, bauhaus marble
colors array ['#92A1C6', '#146A7C', '#F0AB3D', '#C271B4', '#C20D90']

Name

The name prop is used to generate the avatar. It can be the username, email or any random string.

<Avatar name="Maria Mitchell"/>

Variant

The variant prop is used to change the theme of the avatar. The available variants are: marble, beam, pixel, sunset, ring and bauhaus.

<Avatar name="Alice Paul" variant="beam"/>

Size

The size prop is used to change the size of the avatar.

<Avatar name="Ada Lovelace" size={88}/>

Colors

The colors prop is used to change the color palette of the avatar.

<Avatar name="Grace Hopper" colors={["#fb6900", "#f63700", "#004853", "#007e80", "#00b9bd"]}/>

Square

The square prop is used to make the avatar square.

<Avatar name="Helen Keller" square/>

API service

[!IMPORTANT]
Please note that the old service was paused in July 31st 2024. We recommend transitioning to our new API service to ensure uninterrupted access and support.

Get access to the Boring avatars API service here →.

Extension points exported contracts — how you extend this code

AvatarWrapperProps (Interface)
(no doc)
src/demo/playground.tsx
SegmentWrapperProps (Interface)
(no doc)
src/demo/ui-system/components/segment.tsx
SegmentGroupProps (Interface)
(no doc)
src/demo/ui-system/components/segment.tsx
SegmentProps (Interface)
(no doc)
src/demo/ui-system/components/segment.tsx
ColorDotProps (Interface)
(no doc)
src/demo/ui-system/components/color-dot.tsx

Core symbols most depended-on inside this repo

getUnit
called by 16
src/lib/utilities.ts
getRandomColor
called by 7
src/lib/utilities.ts
hashCode
called by 6
src/lib/utilities.ts
getBoolean
called by 3
src/lib/utilities.ts
getDigit
called by 2
src/lib/utilities.ts
getContrast
called by 1
src/lib/utilities.ts
generateColors
called by 1
src/lib/components/avatar-bauhaus.tsx
generateData
called by 1
src/lib/components/avatar-beam.tsx

Shape

Function 35
Interface 7

Languages

TypeScript100%

Modules by API surface

src/lib/utilities.ts8 symbols
src/demo/playground.tsx8 symbols
src/demo/ui-system/components/segment.tsx5 symbols
src/demo/ui-system/components/button.tsx3 symbols
src/lib/components/avatar-sunset.tsx2 symbols
src/lib/components/avatar-ring.tsx2 symbols
src/lib/components/avatar-pixel.tsx2 symbols
src/lib/components/avatar-marble.tsx2 symbols
src/lib/components/avatar-beam.tsx2 symbols
src/lib/components/avatar-bauhaus.tsx2 symbols
src/demo/ui-system/components/color-dot.tsx2 symbols
src/demo/hooks.tsx2 symbols

Dependencies from manifests, versioned

@eslint/js9.29.0 · 1×
@types/node24.1.0 · 1×
@types/react19.1.8 · 1×
@types/react-color3.0.13 · 1×
@types/react-dom19.1.6 · 1×
@vitejs/plugin-react4.5.2 · 1×
eslint9.29.0 · 1×
eslint-plugin-react-hooks5.2.0 · 1×
eslint-plugin-react-refresh0.4.20 · 1×
globals16.2.0 · 1×
nice-color-palettes4.0.0 · 1×
react19.1.0 · 1×

For agents

$ claude mcp add boring-avatars \
  -- python -m otcore.mcp_server <graph>

⬇ download graph artifact