Browse components
Pulse Heart
Like button whose heart squashes, pops and bursts into particles while the count rolls up digit by digit.
Installation
npx shadcn@latest add @glint-ui/pulse-heartFirst time using @glint-ui? Add the registry to components.json once, or install by URL: npx shadcn@latest add https://glint-ui-seven.vercel.app/r/pulse-heart.json
Usage
import { PulseHeart } from "@/components/ui/pulse-heart";
<PulseHeart count={post.likes} liked={post.likedByMe} onChange={(liked) => toggleLike(post.id, liked)} />Props
| Prop | Type | Default | Description |
|---|---|---|---|
| defaultLiked | boolean | false | Initial liked state when uncontrolled. |
| count | number | 128 | Likes from everyone else; your like adds one. |
| color | string | "#f43f5e" | Heart and burst color. |
| particles | number | 10 | Particles per burst. |
| label | string | "Like" | Accessible label. |
| liked | ReactNode | — | Controlled liked state, pair with onChange. |
| onChange | ReactNode | — | (liked, count) => void. |
| className | string | — | Extra classes for the root element. |