Recipe
Emoji Picker UX
A fast, keyboard-navigable emoji picker with recent and search.
Recent
Grid Layout
8-column grid with 40px tap targets. Hover states use violet tint at 20% opacity for clear feedback.
Recent Strip
Persist last 5 used emojis above the grid. Pink hover differentiates from the main picker.
Implementation Notes
- ▸Arrow key navigation with roving tabindex for accessibility.
- ▸Debounced search input filters emoji by name in real time.
- ▸Recent emojis stored in localStorage under meridian:recent-emoji.
- ▸Click outside or Escape key dismisses the picker.