Magic Card

Docs

Magic Card

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

Enter your credentials to access your account

Installation

import { MagicCard } from "@/registry/magicui/magic-card";

<MagicCard>
  <div className="p-4">
    <p>Hello World</p>
    <span>Hover me</span>
  </div>
</MagicCard>

Prop name	Type	Default	Description
`children`	`React.ReactNode`	`-`	The content to be rendered inside the card
`className`	`string`	`-`	Additional CSS classes to apply to the card
`gradientSize`	`number`	`200`	Size of the gradient effect
`gradientColor`	`string`	`#262626`	Color of the gradient effect
`gradientOpacity`	`number`	`0.8`	Opacity of the gradient effect
`gradientFrom`	`string`	`#9E7AFF`	Start color of the gradient border
`gradientTo`	`string`	`#FE8BBB`	End color of the gradient border

Contribute