Docs
Glow Card

Glow Card

Card with a mouse-tracking radial glow effect using CSS custom properties.

Radial Glow

Move your cursor over this card to see a radial glow follow your mouse.

Pink Glow

Customize the glow color with any rgba value for your brand.

Installation

Usage

import { GlowCard } from "@/components/pioneerui/glow-card"
 
export default function Feature() {
  return (
    <GlowCard glowColor="rgba(99,102,241,0.15)">
      <h3>Feature title</h3>
      <p>Feature description</p>
    </GlowCard>
  )
}

Props

PropTypeDefaultDescription
glowColorstringrgba(99,102,241,0.15)Glow radial gradient color
glowSizenumber300Glow circle size in pixels
childrenReact.ReactNodeundefinedCard content
classNamestringundefinedAdditional CSS classes