Blob Mascot
A friendly blob character in SVG: eight body shapes, sixteen expressions and a twelve-colour palette, plus a Mascot Builder that lets people design one and download it as SVG or PNG. Free; animate it with Blob Mascot Motion.
- Category: React Card, Accordion and Display Components
- Licence: Free, MIT
- Built with: React 19, Tailwind CSS 4, Motion
- Dependencies: motion, clsx, tailwind-merge
Examples
Blob Mascot
Sixteen expressions
Mascot Builder
Pick a shape, a face and a colour, then download a PNG or SVG or copy the JSX.
API reference
Blob Mascot
| Prop | Type | Default | Description |
|---|---|---|---|
shape | MascotShape | "circle" | "circle" | "pebble" | "squircle" | "capsule" | "triangle" | "hexagon" | "cloud" | "droplet" |
expression | MascotExpression | "neutral" | "neutral" | "attentive" | "surprised" | "excited" | "happy" | "laughing" | "angry" | "sad" | "scared" | "suspicious" | "confused" | "curious" | "proud" | "shy" | "unimpressed" | "sleepy" |
color | MascotColor | string | "ink" | A palette name or any CSS colour. |
eyeColor | string | — | Picked for contrast when left out. |
size | number | 160 | |
label | string | — | Accessible name; decorative when left out. |
shadow | boolean | true | |
className | string | — |
Sixteen expressions
| Prop | Type | Default | Description |
|---|---|---|---|
expression | MascotExpression | — |
Mascot Builder
| Prop | Type | Default | Description |
|---|---|---|---|
defaultValue | Partial<{ shape; expression; color }> | — | |
onChange | (config) => void | — | |
fileName | string | "mascot" | |
className | string | — |
About Blob Mascot
Blob Mascot gives your product a face. Pick one of eight body shapes, sixteen expressions from happy and curious to sleepy and unimpressed, and a twelve-colour palette, and drop the character into empty states, onboarding or an assistant. The Mascot Builder lets people design their own and download it as SVG or PNG.
Blob Mascot is a display component for React 19, styled with Tailwind CSS 4 and animated with Motion. It drops into Next.js, Vite, Remix or Astro through the shadcn CLI as a single file you own.
When to use Blob Mascot
- Friendly empty states and 404 pages.
- Onboarding and product tours.
- Avatars for AI assistants and bots.
- Profile pictures users design themselves.
How it works
Each mascot is one small SVG, so it stays sharp at any size and weighs almost nothing. Expressions are data: eye shapes, eyelids that clip the eyes for angry, sad and sleepy looks, a mouth and optional blush. Eye colour is picked for contrast with the body, and the builder exports a clean 1024px SVG or PNG.
Interactive parts are buttons or links with accessible names, decorative layers are hidden from assistive tech, and everything is reachable by keyboard. With prefers-reduced-motion on, it holds still or settles instantly instead of animating.
Customizing Blob Mascot
Every prop is documented in the API reference above with its type and default. The ones you will reach for first are listed here.
The Customize panel next to the preview lets you change shape, expression, color, size live, and the Code tab updates to match, so the snippet you copy already carries your values.
- shape (MascotShape, default "circle"): "circle" | "pebble" | "squircle" | "capsule" | "triangle" | "hexagon" | "cloud" | "droplet".
- expression (MascotExpression, default "neutral"): "neutral" | "attentive" | "surprised" | "excited" | "happy" | "laughing" | "angry" | "sad" | "scared" | "suspicious" | "confused" | "curious" | "proud" | "shy" | "unimpressed" | "sleepy".
- color (MascotColor | string, default "ink"): A palette name or any CSS colour.
- eyeColor (string): Picked for contrast when left out.
- size (number, default 160).
- label (string): Accessible name; decorative when left out.
3 examples on this page
- Blob Mascot.
- Sixteen expressions.
- Mascot Builder: Pick a shape, a face and a colour, then download a PNG or SVG or copy the JSX.
Goes well with Blob Mascot
These display pieces share its tokens and motion language, so they sit together on one page without clashing.
- Accordion: An animated React accordion: height springs open, the chevron flips, content fades in
- Number Ticker: An animated React number ticker: each digit rolls on its own wheel
- Marquee: A CSS-only infinite React marquee with faded edges and pause on hover
- Avatar Group: Overlapping React avatars that fan apart on hover with names that spring up
- Theme Toggle: A React dark mode toggle: the sun eclipses into a moon and the theme spreads out
Install Blob Mascot
npx shadcn@latest add https://charcoalui.com/r/blob-mascot.jsonBlob Mascot is free and MIT licensed. The command copies blob-mascot.tsx into components/ui and installs clsx, tailwind-merge; you can also copy the source from the Code tab by hand.
Charcoal UI Pro adds 394 more showpiece components, 112 sections and 100 templates built the same way.
Frequently asked questions
- Is the mascot maker free?
- Yes. Blob Mascot and the Mascot Builder are free and MIT licensed. Animations come with Blob Mascot Motion, part of Charcoal UI Pro.
- Can I use the mascots commercially?
- Yes. The component and the mascots you make with it are yours to use in any project, including commercial ones.
- How do I install Blob Mascot?
- Run npx shadcn@latest add https://charcoalui.com/r/blob-mascot.json. The shadcn CLI copies blob-mascot.tsx into components/ui and installs motion, clsx, tailwind-merge. You can also copy the source from this page by hand.
- Is Blob Mascot free for commercial use?
- Yes. Blob Mascot is MIT licensed: use it in any personal or commercial project and change it however you like.
- Does Blob Mascot work with Next.js?
- Yes. It is a client component for React 19 styled with Tailwind CSS 4, so it works in the Next.js App Router and Pages Router, Vite, Remix and Astro.
- Can an AI coding agent install Blob Mascot?
- Yes. Connect the Charcoal UI MCP server (https://charcoalui.com/mcp) to Claude Code, Cursor or any MCP client; get_component returns Blob Mascot's props and source and get_install_command returns the exact command.