Hover or press and hold to open a tray of drawn reactions that magnify like a dock as you slide across them. Release on one to pick it and it pops into the button.
Maya Rios
Shipped the new onboarding flow today.
npx shadcn@latest add https://hyperblur.dev/r/micro-reaction-picker.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/micro-reaction-picker.tsx.
import { MicroReactionPicker } from "@/components/hyperblur/micro-reaction-picker"
<MicroReactionPicker count={23} onChange={(id) => react(postId, id)} />| Prop | Type | Default | Description |
|---|---|---|---|
| reactions | MicroReaction[] | defaultReactions | List of { id, label, icon, color }. Six original glyphs are exported as defaultReactions. |
| value | string | null | Controlled reaction id. Pair with onChange. | |
| defaultValue | string | null | null | Initial reaction when uncontrolled. |
| count | number | 0 | Reaction count shown in the button. Your own reaction adds one. |
| idle | boolean | false | Open the tray and sweep across it on a loop until the pointer arrives. |
| accent | string | "#2f7bff" | Focus ring color and button tint when the reaction has no color. |
| onChange | (id: string | null) => void | Called with the picked id, or null when cleared. | |
| className / style / ...rest | HTMLAttributes<HTMLDivElement> | Forwarded to the root element. |