Installation
Run the following command:
npx magicui-cli add pulsating-button
Update tailwind.config.js
Add the following animations to your tailwind.config.js
file:
tailwind.config.js
/** @type {import('tailwindcss').Config} */
module.exports = {
theme: {
extend: {
animation: {
pulse: "pulse var(--duration) ease-out infinite",
},
keyframes: {
pulse: {
"0%, 100%": { boxShadow: "0 0 0 0 var(--pulse-color)" },
"50%": { boxShadow: "0 0 0 8px var(--pulse-color)" },
},
},
},
},
};
Props
Prop | Type | Description |
---|---|---|
children | React.ReactNode | The content of the button. |
className | string | Additional class names for the button. |
pulseColor | string | The rbg numbers only for the color of the pulsing waves. |
duration | string | The time span of one pulse. |
Credits
- Credit to @shikhap04