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.