Neon Gradient Card

A beautiful neon card effect

Neon Gradient Card

Installation

npx nyxbui@latest add neon-gradient-card

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

// tailwind.config.ts
module.exports = {
  theme: {
    extend: {
      animation: {
        backgroundPositionSpin:
          "background-position-spin 3000ms infinite alternate",
      },
      keyframes: {
        "background-position-spin": {
          "0%": { backgroundPosition: "top center" },
          "100%": { backgroundPosition: "bottom center" },
        },
      },
    },
  },
};

Props

Prop	Type	Description	Default
className	string	The class name to be applied to the component	-
children	ReactNode	Children elements	-
borderSize	number	The size of the border	5
borderRadius	number	The size of the radius	20
neonColors	object	The colors of the neon gradient	`{ firstColor: "#ff00aa", secondColor: "#00FFF1" }`