Shine Border
Installation
Run the following command:
npx magicui-cli add shine-borderUpdate 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.