A thumbs-up that tilts back, pops forward and throws a fan of spark lines, with a rolling like count beside it.
Priya Raman
Staff engineer / 2h ago
Moving retries into the queue worker cut our p99 from 4.1s to 380ms. Worth it.
npx shadcn@latest add https://hyperblur.dev/r/like-thumbs-pop.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/like-thumbs-pop.tsx.
import { LikeThumbsPop } from "@/components/hyperblur/like-thumbs-pop"
<LikeThumbsPop count={48} onLikeChange={(liked, count) => console.log(liked, count)} />| Prop | Type | Default | Description |
|---|---|---|---|
| count | number | 0 | Total count at the initial liked state. Liking adds one to it, unliking takes it back. |
| liked | boolean | Controlled liked state. Pair with onLikeChange. | |
| defaultLiked | boolean | false | Initial liked state when uncontrolled. |
| onLikeChange | (liked: boolean, count: number) => void | Called on every toggle with the new liked state and the new count. | |
| color | string | "#2f7bff" | Fill and spark color. |
| size | number | 22 | Icon size in pixels. The button and count scale with it. |
| label | string | "Like" | Accessible name of the toggle button. |