Back

Animated Like Button with Burst Effect

A polished React like button with burst particles, ripple circle, spring heart animation, and smooth number transitions using Framer Motion and NumberFlow.

Category
ButtonReact
CSS
shadcn

Manual

Create a file and paste the following code into it.

src/index-demo.tsx
1
2
3
4
5
6
7
8
9
import { LikeButton } from "@/components/ui/like-button";

export default function Demo() {
  return (
    <div className="flex h-dvh w-full items-center justify-center">
      <LikeButton initialCount={24} />
    </div>
  );
}

Update the import paths to match your project setup.

Similar screens