Neon Border

A visually appealing neon border component with customizable animations and colors.

API

Prop Name	Type	Default	Description
`color1`	`string`	`"#0496ff"`	Primary color of the neon border.
`color2`	`string`	`"#ff0a54"`	Secondary color of the neon border.
`animationType`	`"none" \| "half" \| "full"`	`"half"`	Type of animation effect applied to the border.
`duration`	`number`	`6`	Duration of the animation effect in seconds.
`class`	`string`	`""`	Additional CSS classes for styling.

npm

pnpm

bun

yarn

npx shadcn-vue@latest add "https://inspira-ui.com/r/neon-border.json"

Copy and paste the following code in the same folder

NeonBorder.vue

Customizable Colors: Allows setting primary and secondary neon colors.
Three Animation Modes: Supports none, half, and full animation effects.
Adjustable Animation Duration: Duration can be fine-tuned for different effects.
Reactive Design: Uses Vue’s reactivity system for dynamic updates.
Scoped Styles: Ensures styles do not interfere with other components.

On This Page