Neon Border

Card with a pulsing neon glow border. Configurable color. CSS box-shadow animation, no canvas required.

Cyan glow

Purple glow

Code

import { NeonBorder } from "@/components/ui/neon-border"

export default function Example() {
  return (
    <NeonBorder color="cyan" className="p-8 flex items-center justify-center">
      <p className="font-semibold">Neon glow card</p>
    </NeonBorder>
  )
}

Installation

$npx particleui-cli add neon-border

Usage

TSX

import { NeonBorder } from "@/components/ui/neon-border"

export default function Example() {
  return (
    <NeonBorder color="cyan" className="p-8 flex items-center justify-center">
      <p className="font-semibold">Neon glow card</p>
    </NeonBorder>
  )
}

Props

Prop	Type	Default	Required
children	React.ReactNode	—	yes
color	string	`"cyan"`	no
className	string	—	no

Details

Source filecomponents/ui/neon-border.tsx

Typeui

Categoriescards, particles

npm dependencies

Registry deps

Claude skill—