Neon Gradient Card
Installation
Run the following command:
npx magicui-cli add neon-gradient-cardUpdate tailwind.config.js
Add the following animations to your tailwind.config.js file:
tailwind.config.js
/** @type {import('tailwindcss').Config} */
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" } |
Credits
- Credit to @Unleashed-Design