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

PropTypeDefaultDescription
classNamestring-The class name to be applied to the component.
durationnumber14Defines the animation duration to be applied on the shining border.
colorstring#FFFFFFDefines the color of the border.
borderRadiusnumber8Defines the radius of the border.
borderWidthnumber1Defines the width of the border.
childrenReactNode{}Contains react node elements.

Credits