Docs
Glass Card

Glass Card

Frosted glass card with a mouse-tracking radial glow and a shimmer border highlight.

Glass Card

A frosted glass surface with a mouse-following glow effect. Move your cursor over the card to see it in action.

Installation

Usage

import { GlassCard } from "@/components/pioneerui/glass-card"
 
export default function Page() {
  return (
    <div className="bg-gradient-to-br from-violet-950 to-zinc-950 p-8">
      <GlassCard tint="rgba(139,92,246,0.4)">
        <h3 className="text-white font-bold">Feature Title</h3>
        <p className="text-white/60 text-sm mt-1">Your content here.</p>
      </GlassCard>
    </div>
  )
}

Props

PropTypeDefaultDescription
glowFollowbooleantrueEnable mouse-tracking glow orb
tintstring"rgba(139,92,246,0.3)"Glow and shimmer border color
childrenReactNodeCard content