Skip to content
caliper ui docs
DemoSign inGet Pro

Pro

Emoji picker

Pick an emoji by name, by group or by browsing. The grid moves with the arrow keys, the name of the one under the pointer or focus shows in the footer, and recent picks lead the list.

Pro
pnpm dlx shadcn@latest add @caliper/emoji-picker

Set a status

Shown beside your name for 4 hours.

🎯In focus mode

Recent

Smileys

People

Nature

Food

Activity

Travel

Objects

Symbols

Installs components/ui/emoji-picker.tsxDepends on lucide-reactMotion honours reduced motion

When to use

Use it for

  • Reactions, statuses, and icons for pages, projects or channels.
  • Inside a popover beside a message or a title.

Skip it when

  • A handful of fixed reactions; the reaction bar is quicker.
  • Finding any of the ~3,700 emoji; this ships a curated 630 with no skin tones.

Decisions

Why it is built this way, so you know what to keep when you change your copy.

Behaviour

One tab stop
The grid is a single stop; arrows move eight across and Down from the search goes straight in.

Usage

Names from Unicode
Every name comes from the Unicode character database, so search matches what assistive technology reads.

Installation

terminal
pnpm dlx shadcn@latest add @caliper/emoji-picker

Adds its 3 files to components/ui/, each with its own stylesheet, and installs their packages. Pro installs with your access token, set up once per project. See Pro access. The first part also adds Caliper UI’s tokens; import them once as in Installation.

Usage

Import it from your copy of the source. The example behind the preview comes with the source.

example.tsx
import { EmojiPicker } from "@/components/ui/emoji-picker"

The worked example comes with Pro

The 37-line example behind the preview opens here, ready to copy.

  • 576 Pro parts, blocks and page templates, all with source
  • $199 once, with a year of updates. What you have stays yours
  • A full refund within 14 days if it is not for you
Checking your licence…

API reference

EmojiPicker

component
PropTypeDefaultDescription
onPick *(emoji: Emoji) => void—
recentreadonly string[][]Emoji characters to show first, most recent first.
labelstring"Emoji"
classNamestring—

Accessibility

It exposes group and toolbar semantics, with aria-label kept in step with state.

KeyBehaviour
HomeJumps to the first item or the minimum.
EndJumps to the last item or the maximum.
↓Moves to the next item or value.
EnterActivates the focused control.

Motion

It checks prefers-reduced-motion itself and settles immediately instead of travelling. Every state is still reachable.

All Inputs examples