Skip to main content

​
Overview

The Neon Border component creates a visually striking neon-style border with customizable colors and animation effects. Perfect for creating modern, cyberpunk-inspired UI elements.

​
Installation

Add the following entry to the inline theme in your main.css file: 
@theme inline {
  --animate-neon-border: neon-border var(--neon-border-duration) linear infinite;
  @keyframes neon-border {
    0% {
      transform: rotate(0deg);
    }
    100% {
      transform: rotate(360deg);
    }
  }
}

​
Usage

<NeonBorder
  color1="#0496ff"
  color2="#ff0a54"
  animationType="half"
  :duration="6"
>
  <div class="p-8">
    Your content here
  </div>
</NeonBorder>

​
Props

​
color1
string
default:"#0496ff"
Primary color of the neon border.
​
color2
string
default:"#ff0a54"
Secondary color of the neon border.
​
animationType
'none' | 'half' | 'full'
default:"half"
Type of animation effect applied to the border.
​
duration
number
default:"6"
Duration of the animation effect in seconds.
​
class
string
default:""
Additional CSS classes for styling.

​
Credits

Inspired by modern neon border effects.

Build docs developers (and LLMs) love

Get started for freeTalk to us