Magic Card

display

Card with mouse-tracking gradient spotlight effect.

Preview

No preview available

Check the code examples below.

Installation

npm install @launchapp/design-system
Import
import { MagicCard } from "@launchapp/design-system";

Examples

Interactive spotlight card

<MagicCard gradientColor="#3b82f6">  <div className="p-8">    <h3 className="text-xl font-bold">Magic Card</h3>    <p className="text-muted-foreground mt-2">Hover to see the spotlight effect.</p>  </div></MagicCard>

Props

PropTypeDefaultDescription
children*
React.ReactNode—Card content.
gradientColor
string"#262626"Spotlight gradient color.
← PreviousLive Indicator
Next →Marquee