Display / WordSticker & Doodle
WordSticker & Doodle
Words lettered in Sketchpop and cut out like a sticker, plus little marker doodles to go with them. Design one in the playground's Lettering tool and copy the component.
Server componentWCAG AANew
Plop!Squish!All clear
import { Doodle, WordSticker } from "@plop-ui/react";
<WordSticker tone="mustard" size={64} tilt={-4}>Plop!</WordSticker>
<WordSticker tone="bubblegum" jitter={3.5}>Squish!</WordSticker>
<Doodle kind="sparkle" tone="mustard" size={52} />Change every prop live in the playground.
Props
WordSticker
| Prop | Type | Default | What it does |
|---|---|---|---|
| children required | string | — | The words. Keep it short: a word or two reads best. |
| className | string | none | — |
| jitter | number | 2 | How wobbly the letters are (max tilt per letter, in degrees). Same words, same wobble. |
| size | number | 48 | Font size in px. |
| style | CSSProperties | none | — |
| tilt | number | 0 | Rotation in degrees. |
| tone | "ink" | "periwinkle" | "mint" | "tomato" | "mustard" | "bubblegum" | "paper" | mustard | Fill color under the ink line. |
Doodle
| Prop | Type | Default | What it does |
|---|---|---|---|
| kind required | "burst" | "star" | "heart" | "sparkle" | — | — |
| className | string | none | — |
| size | number | 48 | Width and height in px. |
| style | CSSProperties | none | — |
| tilt | number | 0 | Rotation in degrees. |
| tone | "ink" | "periwinkle" | "mint" | "tomato" | "mustard" | "bubblegum" | tomato | Fill color. |
Use it well
DoUse it for a word or two of personality: an empty state, a celebration, a section mark.
Don'tSet body text or long labels in it; the die-cut border is for short, loud words.
Accessibility
- The words are read once; the three stacked layers are hidden from screen readers.
- Doodles are decorative (aria-hidden) and never take focus.
- Same words, same wobble: the jitter is seeded by the text, so it matches on the server and in the browser.