Magic Card

cardfrom MagicUI Effects

Magic Card

AI Usage Rules

Use MagicCard for cards with a mouse-following spotlight effect. Best for feature showcases or pricing cards. The gradient follows the cursor, creating an interactive feel. Works best on dark backgrounds.

Code Template

"use client"
import { useCallback, useRef, type CSSProperties } from "react"
import { cn } from "@/lib/utils"

interface MagicCardProps extends React.ComponentProps<"div"> {
  gradientSize?: number
  gradientColor?: string
  gradientOpacity?: number
  gradientFrom?: string
  gradientTo?: string
}

export function MagicCard({ children, className, gradientSize = 200, gradientColor = "#262626", ...props }: MagicCardProps) {
  const cardRef = useRef<HTMLDivElement>(null)

  const handleMouseMove = useCallback((e: React.MouseEvent<HTMLDivElement>) => {
    if (!cardRef.current) return
    const { left, top } = cardRef.current.getBoundingClientRect()
    const x = e.clientX - left
    const y = e.clientY - top
    cardRef.current.style.setProperty("--mouse-x", `${x}px`)
    cardRef.current.style.setProperty("--mouse-y", `${y}px`)
  }, [])

  return (
    <div ref={cardRef} onMouseMove={handleMouseMove}
      className={cn("group relative flex rounded-xl border bg-neutral-950 text-white overflow-hidden", className)}
      style={{ "--gradient-size": `${gradientSize}px`, "--gradient-color": gradientColor } as CSSProperties}
      {...props}>
      <div className="absolute inset-0 opacity-0 transition-opacity duration-300 group-hover:opacity-100"
        style={{ background: "radial-gradient(var(--gradient-size) circle at var(--mouse-x) var(--mouse-y), var(--gradient-color), transparent 40%)" }} />
      <div className="relative z-10">{children}</div>
    </div>
  )
}

Props Schema

Property	Type	Default
children	string	—
gradientSize	number	—
gradientColor	string	—

View raw JSON schema

{
  "type": "object",
  "properties": {
    "children": {
      "type": "string"
    },
    "gradientSize": {
      "type": "number"
    },
    "gradientColor": {
      "type": "string"
    }
  }
}