Introducing Magic UI Pro - 50+ blocks and templates to build beautiful landing pages in minutes.


Docs
Shine Border

Shine Border

Shine border is an animated background border effect.

Shine Border

Installation

npx shadcn@latest add "https://magicui.design/r/shine-border"

Examples

Monotone

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
colorstringDefines the color of the border.#FFFFFF
borderRadiusnumberDefines the radius of the border.8px
borderWidthnumberDefines the width of the border.1px
childrenReactNodeContains react node elements.

Credits