Skip to main content

​
Installation

    ​
    Usage

    showLineNumbers
    import { MagicCard } from "@/components/ui/magic-card"
    showLineNumbers
    <MagicCard>
  <div className="p-6">
    <h3 className="text-xl font-semibold">Magic Card</h3>
    <p className="mt-2 text-muted-foreground">Hover me to see the effect</p>
  </div>
</MagicCard>

    ​
    Props

    ​
    MagicCard

    PropTypeDefaultDescription
    childrenReact.ReactNode-The content to be rendered inside the card
    classNamestring-Additional CSS classes to apply to the card
    gradientSizenumber200Size of the gradient effect
    gradientColorstring#262626Color of the gradient effect
    gradientOpacitynumber0.8Opacity of the gradient effect
    gradientFromstring#9E7AFFStart color of the gradient border
    gradientTostring#FE8BBBEnd color of the gradient border

    Build docs developers (and LLMs) love

    Get started for freeTalk to us