Like Button
Netflix inspired animated like button component with particle effects.
import { LikeButton } from "@/components/ui/like-button/like-button";
export default function LikeButtonDemo() {
return (
<div>
<LikeButton />
</div>
);
}
npx shadcn@latest add @roiui/like-buttonnpx shadcn@latest add @roiui/like-button-tailwindanatomy
<LikeButton />
Component props
Prop
Type
Default
Name
isPlayingDescription
Whether to auto-play the like animation continuously every 3 seconds
Type
booleanDefault
falseName
onClickDescription
Callback function called when the button is clicked
Type
functionDefault
-
Name
classNameDescription
Additional CSS classes to apply to the like button container
Type
stringDefault
-
Name
particleCountDescription
Number of particles to generate on animation. Particles are distributed evenly across a 120° spread
Type
numberDefault
6Name
colorsDescription
Array of color values for particles. Can be any valid CSS color (hex, rgb, CSS variables, etc.)
Type
string[]Default
["var(--foreground)"]Name
colorModeDescription
How colors are applied to particles. 'alternating' cycles through the color array sequentially, 'random' picks a random color for each particle
Type
"alternating" | "random"Default
"alternating"