Docs
Shine Border
Shine Border
Shine border is an animated background border effect.
Shine Border
Installation
npx nyxbui@latest add shine-border
Add the following animations to your tailwind.config.ts file:
// tailwind.config.ts
module.exports = {
theme: {
extend: {
keyframes: {
"shine-pulse": {
"0%": {
"background-position": "0% 0%",
},
"50%": {
"background-position": "100% 100%",
},
to: {
"background-position": "0% 0%",
},
},
},
},
},
};
Examples
Silver
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} OR #${string} [] | A string or string array to define border color. | #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. |