Docs
Rainbow Button

Rainbow Button

An animated button with a rainbow effect.

Installation

npx nyxb@latest add rainbow-button

Update the import paths to match your project setup.

Update globals.css

Add the following to your globals.css file:

:root {
  --color-1: 0 100% 63%;
  --color-2: 270 100% 63%;
  --color-3: 210 100% 63%;
  --color-4: 195 100% 63%;
  --color-5: 90 100% 63%;
}

Update tailwind.config.ts

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

tailwind.config.ts
/** @type {import('tailwindcss').Config} */
module.exports = {
  theme: {
    extend: {
      colors: {
        "color-1": "hsl(var(--color-1))",
        "color-2": "hsl(var(--color-2))",
        "color-3": "hsl(var(--color-3))",
        "color-4": "hsl(var(--color-4))",
        "color-5": "hsl(var(--color-5))",
      },
      animation: {
        rainbow: "rainbow var(--speed, 2s) infinite linear",
      },
      keyframes: {
        rainbow: {
          "0%": { "background-position": "0%" },
          "100%": { "background-position": "200%" },
        },
      },
    },
  },
};

Props

PropTypeDescription
childrenReact.ReactNodeThe content to be displayed inside the button.
Morphing TextStandard Button