Pulsating Button

PreviewCode

Join Affiliate Program

@/demos/PulsatingButtonDemo.tsx

import { PulsatingButton } from '@/registry/magicui/pulsating-button'

export function PulsatingButtonDemo() {
  return <PulsatingButton>Join Affiliate Program</PulsatingButton>
}

Installation

pnpm

pnpm dlx shadcn@latest add @magicui-solid/pulsating-button

bun

bunx shadcn@latest add @magicui-solid/pulsating-button

yarn

yarn dlx shadcn@latest add @magicui-solid/pulsating-button

npm

npx shadcn@latest add @magicui-solid/pulsating-button

Import

import { PulsatingButton } from '@/components/magicui/pulsating-button'

Usage

<PulsatingButton>Pulsating Button</PulsatingButton>

Examples

Ripple Variant

PreviewCode

Join Affiliate Program

@/demos/PulsatingButtonDemo2.tsx

import { PulsatingButton } from '@/registry/magicui/pulsating-button'

export function PulsatingButtonDemo2() {
  return (
    <PulsatingButton
      variant="ripple"
      distance="10px"
      class="bg-blue-400 text-white"
    >
      Join Affiliate Program
    </PulsatingButton>
  )
}

Props

Prop	Type	Default	Description
children	JSX.Element	-	The content of the button.
class	string	-	Additional class names for the button.
pulseColor	string	Derived from button background	Any valid CSS color for the pulsing waves.
duration	string	1.5s	The duration of one pulse.
distance	string	8px	How far the pulse expands from the button.
variant	"pulse" / "ripple"	pulse	The pulse animation style.

Credits

Credit to @shikhap04 & @abdmjd1 for the inspiration behind this component.

Original:

magicui.design/docs/components/pulsating-button