Neon Border

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

API

Prop 名称	类型	默认值	描述
`color1`	`string`	`"#0496ff"`	Primary color of the neon border.
`color2`	`string`	`"#ff0a54"`	Secondary color of the neon border.
`animationType`	`"none" \| "half" \| "full"`	`"half"`	类型 of animation effect applied to the border.
`duration`	`number`	`6`	Duration of the animation effect in seconds.
`class`	`string`	`""`	Additional CSS classes for styling.

Installation

Add following entry to 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);
    }
  }
}

通过 CLI 安装

npm

pnpm

bun

yarn

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

手动安装

在同一个文件中，复制并粘贴以下代码：

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.

感谢

Inspired by modern neon border effects.

流星

A component that displays a meteor shower animation with customizable meteor count and styling.

Particle Image

Visually appealing particle animation applied to images as seen on NuxtLabs.com

本页

API
Installation
通过 CLI 安装
手动安装
功能特性
感谢

GitHub 收藏创建问题加入 Discord 社区关注 X 关注 Bluesky