║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║

---

title: Magic Card date: 2024-07-07 description: A spotlight effect that follows your mouse cursor and highlights borders on hover. author: dillionverma published: true

<ComponentPreview name="magic-card-demo" />

Installation

<Tabs defaultValue="cli"> <TabsList> <TabsTrigger value="cli">CLI</TabsTrigger> <TabsTrigger value="manual">Manual</TabsTrigger> </TabsList> <TabsContent value="cli">

npx shadcn@latest add @magicui/magic-card

</TabsContent> <TabsContent value="manual"> <Steps>

<Step>Copy and paste the following code into your project.</Step>

<ComponentSource name="magic-card" />

<Step>Update the import paths to match your project setup.</Step>

</Steps> </TabsContent> </Tabs>

Usage

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

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

Props

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 |

║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║