Skip to main content

​
Overview

The Border Beam component creates a stylish animated border effect with customizable appearance and timing. Perfect for highlighting cards, buttons, or important UI elements.

​
Usage

<BorderBeam
  :size="200"
  :duration="15"
  :borderWidth="1.5"
  colorFrom="#ffaa40"
  colorTo="#9c40ff"
/>

​
Props

​
class
string
default:""
Additional CSS classes for custom styling.
​
size
number
default:"200"
Size of the animated border beam effect.
​
duration
number
default:"15"
Duration of the animation in seconds.
​
borderWidth
number
default:"1.5"
Width of the border around the beam effect.
​
anchor
number
default:"90"
Anchor point for the beam, determining its position along the border.
​
colorFrom
string
default:"#ffaa40"
Starting color for the gradient of the beam.
​
colorTo
string
default:"#9c40ff"
Ending color for the gradient of the beam.
​
delay
number
default:"0"
Delay before the animation starts, in seconds.

​
Credits

Ported from Magic UI.

Build docs developers (and LLMs) love

Get started for freeTalk to us