║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║

---

title: Pulsating Button date: 2024-07-23 description: An animated pulsating button useful for capturing attention of users. author: shikhap04 published: true

<ComponentPreview name="pulsating-button-demo" />

Installation

<Tabs defaultValue="cli"> <TabsList> <TabsTrigger value="cli">CLI</TabsTrigger> <TabsTrigger value="manual">Manual</TabsTrigger> </TabsList> <TabsContent value="cli">

npx shadcn@latest add @magicui/pulsating-button

</TabsContent> <TabsContent value="manual"> <Steps>

<Step>Copy and paste the following code into your project.</Step>

<ComponentSource name="pulsating-button" />

<Step>Update the import paths to match your project setup.</Step>

<Step>Add the required CSS animations</Step>

Add the following animations to your global CSS file.

@theme inline {
  --animate-pulse: pulse var(--duration) ease-out infinite;

  @keyframes pulse {
    0%,
    100% {
      box-shadow: 0 0 0 0 var(--pulse-color);
    }
    50% {
      box-shadow: 0 0 0 8px var(--pulse-color);
    }
  }
}

</Steps> </TabsContent> </Tabs>

Usage

import { PulsatingButton } from "@/components/ui/pulsating-button"

<PulsatingButton>Pulsating Button</PulsatingButton>

Props

| Prop | Type | Default | 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

║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║