Magic Card

Cards 81

About

A spotlight effect that follows your mouse cursor and highlights borders on hover.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Magic Card to your project and fits it to your theme.

Code

How Magic Card is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import { useTheme } from "next-themes"

import { MagicCard } from "@/components/ui/magic-card"

export function MagicCardDemo() {
  const { theme } = useTheme()
  return (
    <div
      className={
        "flex h-[500px] w-full flex-col gap-4 lg:h-[250px] lg:flex-row"
      }
    >
      <MagicCard
        className="cursor-pointer flex-col items-center justify-center shadow-2xl whitespace-nowrap text-4xl"
        gradientColor={theme === "dark" ? "#262626" : "#D9D9D955"}
      >
        Magic
      </MagicCard>
      <MagicCard
        className="cursor-pointer flex-col items-center justify-center shadow-2xl whitespace-nowrap text-4xl"
        gradientColor={theme === "dark" ? "#262626" : "#D9D9D955"}
      >
        Card
      </MagicCard>
    </div>
  )
}