Pulsating Button

Docs

Pulsating Button

An animated pulsating button useful for capturing attention of users.

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.

Pulsating Button

Installation

Run the following command:

Update tailwind.config.js

Props

Credits

Update `tailwind.config.js`