# Character

Shape character built from primitives: a squircle, cloud, blob or circle with two dot or pill eyes. Shape, colour, expression and brightness are props, so it can carry a value, sit inline in a headline and morph between steps.

> Composed · Free · Signature — React Native, Expo Go compatible.

## Install

```bash
npx @lumioui/cli add character
```

## Import

```tsx
import { Character, expressionFor } from "@/components/ui/character/character";
```

## Props

| Prop | Type | Notes |
| --- | --- | --- |
| `shape?` | `CharacterShape` | Body silhouette. Changing it morphs the outline in place. Default "squircle". |
| `expression?` | `CharacterExpression` | Eye pose. Changing it morphs the eyes and the body's posture. Default "calm". |
| `eyes?` | `CharacterEyes` | Round dots or tall pills. Default "dot". |
| `color?` | `AccentName | (string & {})` | A curated accent name or a `#RRGGBB` hex. Default: the surrounding  accent (`useTheme().colors.primary`). Changes crossfade. |
| `eyeColor?` | `string` | Eye colour. Default: the accent's own `on` colour, or ink / white by  luminance for a custom hex. |
| `size?` | `CharacterSize | number` | Box side in points, or a preset: inline 28 (sits in a headline), sm 48,  md 72, lg 112, xl 160. Default "md". |
| `light?` | `number` | Brightness 0..1 — the character can carry a value as its light. Default 1. |
| `render?` | `React.ReactNode | ((state: CharacterRenderState) => React.ReactNode)` | A supplied mascot (image or illustration) drawn in place of the shape.  Pass a function to swap the pose per expression. The slot keeps the  same box, posture and brightness rules as the drawn character. |
| `label?` | `string` | Accessibility label. Default "<expression> character". Pass "" to hide  a purely decorative character from screen readers. |
| `className?` | `string` | — |

Source: https://lumioui.com/components/character