Skip to main content
ParticleUI

Glow Card

Card with cursor-tracked radial spotlight glow. Configurable color, size, and opacity.

Glow Card
Move cursor over me
Purple Glow
Custom color
Amber Glow
Higher opacity

Installation

1

Run the CLI

$npx particleui-cli add glow-card

Usage

TSX
import { GlowCard } from "@/components/ui/glow-card"

export default function Example() {
  return (
    <GlowCard className="p-6">
      <h3 className="font-semibold">Card title</h3>
      <p className="text-sm text-text-3 mt-1">Move your cursor over the card.</p>
    </GlowCard>
  )
}

Props

PropTypeDefaultRequired
glowColorstring"oklch(78% 0.17 200)"no
glowSizenumber300no
glowOpacitynumber0.15no

Details

Source filecomponents/ui/glow-card.tsx
Typeui
Categoriescards, particles
npm dependencies
Registry deps
Claude skill