A heart button that fills with a bouncy pop, scatters a ring of particles and rolls its count to the new value.
Boston fern in clay
Fernhill / Indoor plants
npx shadcn@latest add https://hyperblur.dev/r/like-burst.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/like-burst.tsx.
import { LikeBurst } from "@/components/hyperblur/like-burst"
<LikeBurst count={1284} onChange={(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 onChange. | |
| defaultLiked | boolean | false | Initial liked state when uncontrolled. |
| onChange | (liked: boolean, count: number) => void | Called on every toggle with the new liked state and the new count. | |
| color | string | "#ff4d6d" | Heart fill, ring and particle color. |
| size | number | 24 | Heart size in pixels. The button and count scale with it. |
| label | string | "Like" | Accessible name of the toggle button. |