🤎 Enjoying my work? Buy me a coffee to support my coding adventures! ☕


Docs
Shimmer Button

Shimmer Button

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

Installation

npx nyxbui@latest add shimmer-button

Add the following animations to your tailwind.config.ts file:

// tailwind.config.ts
module.exports = {
  theme: {
    extend: {
      animation: {
        "spin-around": "spin-around calc(var(--speed) * 2) infinite linear",
        slide: "slide var(--speed) ease-in-out infinite alternate",
      },
      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)",
          },
        },
        slide: {
          to: {
            transform: "translate(calc(100cqw - 100%), 0)",
          },
        },
      },
    },
  },
};

Props

Prop NameTypeDescriptionDefault Value
shimmerColorstringThe color of the shimmer#ffffff
shimmerSizestringThe size of the shimmer0.05em
borderRadiusstringThe border radius of the button100px
sparkDurationstringThe duration of the spark animation3s
backgroundstringThe background of the buttonrgba(0, 0, 0, 1)
classNamestringThe class name of the buttonundefined
childrenReact.ReactNodeThe children of the buttonundefined