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

---

title: Shimmer Button date: 2023-08-10 description: A button with a shimmering light which travels around the perimeter. author: dillionverma published: true video: https://cdn.magicui.design/shimmer-button.mp4

<ComponentPreview name="shimmer-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/shimmer-button

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

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

<ComponentSource name="shimmer-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-shimmer-slide: shimmer-slide var(--speed) ease-in-out infinite
    alternate;
  --animate-spin-around: spin-around calc(var(--speed) * 2) infinite linear;

  @keyframes shimmer-slide {
    to {
      transform: translate(calc(100cqw - 100%), 0);
    }
  }
  @keyframes spin-around {
    0% {
      transform: translateZ(0) rotate(0);
    }
    15%,
    35% {
      transform: translateZ(0) rotate(90deg);
    }
    65%,
    85% {
      transform: translateZ(0) rotate(270deg);
    }
    100% {
      transform: translateZ(0) rotate(360deg);
    }
  }
}

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

Usage

import { ShimmerButton } from "@/components/ui/shimmer-button"

<ShimmerButton>Shimmer Button</ShimmerButton>

Props

| Prop | Type | Default | Description | | ----------------- | ----------------- | ------------------ | ----------------------------------- | | shimmerColor | string | #ffffff | The color of the shimmer | | shimmerSize | string | 0.05em | The size of the shimmer | | borderRadius | string | 100px | The border radius of the button | | shimmerDuration | string | 3s | The duration of the spark animation | | background | string | rgba(0, 0, 0, 1) | The background of the button | | className | string | undefined | The class name of the button | | children | React.ReactNode | undefined | The children of the button |

Credits

Credit to @jh3yy for the inspiration behind this component.

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