Shimmer Button

A button with a shimmering light which travels around the perimeter.

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

export function ShimmerButtonDemo() {
  return (
    <ShimmerButton className="shadow-2xl">
      <span className="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 https://ebonui.com/r/shimmer-button.json

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.

Separator Shinny Icons

On This Page

Installation Usage Props Credits

Support Ebon UI by giving it a star on GitHub!

A lot of work goes into maintaining and improving Ebon UI. Your stars help show your support and encourage further development.