Shimmer Button

A button with a shimmering light which travels around the perimeter

import { ShimmerButton } from '@/registry/magicui/shimmer-button'

export function ShimmerButtonDemo() {
  return (
    <ShimmerButton class="shadow-2xl">
      <span class="
        text-center text-sm leading-none font-medium tracking-tight
        whitespace-pre-wrap text-white
        lg:text-lg
        dark:from-white dark:to-slate-900/10
      "
      >
        Shimmer Button
      </span>
    </ShimmerButton>
  )
}

Installation

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

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

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

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

Import

import { ShimmerButton } from '@/components/magicui/shimmer-button'

Usage

<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
`class`	`string`	`undefined`	The class name of the button
`children`	`JSX.Element`	`undefined`	The children of the button

Credits

Credit to @jh3yy for the inspiration behind this component.

Original:

magicui.design/docs/components/shimmer-button