shadcn.io is not affiliated with official shadcn/ui
Emoji Picker Chat Block for Ark UI
A narrow messenger thread whose composer completes emoji shortcodes from a strip of six matches, with number keys, arrows, recent picks first, and big emoji messages drawn without a bubble.
Installation
Overview
Type an emoji by its name with this emoji picker chat for React with Ark UI. A hairline frame with a plus mark on each corner holds a narrow window of fixed height for Glyphton, a messenger, drawn with ":fi" typed in the composer and a strip docked above it. The strip shows six matches in a row (fire, fish, fireworks, first place, fingers crossed, fist), each a button with its glyph and a Kbd digit, and a line under it names the code and the emoji under the pointer or the active one. The keys 1 to 6, Tab for the first, the arrow keys with Enter, or a press complete the code at the caret, Escape closes the strip, and recent picks lead the next list. The smiley button types the colon for touch. A message that is only one to three emoji is drawn large with no bubble. The send Shine Button is the only colored control, and the frame is ruled by Guides. For a messenger, a team chat or any field where emoji are typed. The full tabbed picker is a separate dialog.
FAQ
Which keys complete a shortcode?
With the strip open, the digits 1 to 6 add the matching emoji, Tab adds the first, and the left and right arrow keys move the active one (reversed in a right to left page) so Enter adds it. Escape closes the strip and typing reopens it. Everything is done from the field, so focus never leaves what you are writing.
How are matches found and ordered?
The text between a colon and the caret is the query, and an emoji matches when its shortcode contains it. Recently picked emoji come first, then codes that start with the query, then the rest, up to six in all. When nothing matches, the line under the strip says so and tells you to keep typing or press Escape.
What makes a message big?
A message that holds only one to three emoji and nothing else is drawn at a large size without a bubble, and a screen reader hears the emoji's names (for example "party popper, raising hands") instead of the glyphs. Anything with words stays a normal bubble.
Where do the emoji come from?
They are data in the file: a short typed list with a shortcode, a glyph and a name for each. They are content here and never used as interface icons. In your app, load a full emoji set and keep the same shape; the full tabbed picker with skin tones is a different block.