Inputs & feedback
EmojiPicker
Slide-up sheet with keyword search and 96 default emojis. Built on framer-motion, fully theme-aware.
EmojiPicker is a bottom-sheet emoji selector. Slide-up animation, keyword search, 96 default emojis covering money, family, achievement, and play. Pass your own emojis array to swap the dictionary entirely.
Designed for KidCash-style flows where the kid picks their own avatar, goal mascot, or chore icon — an emoji picker that doesn't feel like a Slack reaction picker.
Example
tsx
import { EmojiPicker } from '@kidcash/ui';
const [open, setOpen] = useState(false);
const [picked, setPicked] = useState('🦄');
<button onClick={() => setOpen(true)}>{picked}</button>
<EmojiPicker open={open} onClose={() => setOpen(false)} onSelect={(e) => { setPicked(e); setOpen(false); }} />Try it live
← Back to the playground to see EmojiPicker rendered with every variant. Or install @kidcash/ui and copy the example above into your own app.