Shine Border
Installation
Run the following command:
npx magicui-cli add shine-border
Update tailwind.config.js
Add the following animations to your tailwind.config.js
file:
tailwind.config.js
/** @type {import('tailwindcss').Config} */
module.exports = {
theme: {
extend: {
keyframes: {
"shine-pulse": {
"0%": {
"background-position": "0% 0%",
},
"50%": {
"background-position": "100% 100%",
},
to: {
"background-position": "0% 0%",
},
},
},
},
},
};
Examples
Monotone
Shine Border
Props
Prop | Type | Description | Default |
---|---|---|---|
className | string | The class name to be applied to the component. | |
duration | number | Defines the animation duration to be applied on the shining border. | 14 seconds |
color | string | Defines the color of the border. | #FFFFFF |
borderRadius | number | Defines the radius of the border. | 8px |
borderWidth | number | Defines the width of the border. | 1px |
children | ReactNode | Contains react node elements. |
Credits
- Credits to Matthew Goshman for this fantastic component.
- Credits to Anu Adebayo for improving and customizing the component.