❤️ Support our project - Your donation helps us continue developing awesome tools!


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

PropTypeDescriptionDefault
classNamestringThe class name to be applied to the component.
durationnumberDefines 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
borderRadiusnumberDefines the radius of the border.8px
borderWidthnumberDefines the width of the border.1px
childrenReactNodeContains react node elements.