Introducing Magic UI Pro - 50+ blocks and templates to build beautiful landing pages in minutes.

19.0k
173

Neon Gradient Card

PreviousNext

A beautiful neon card effect

Installation

pnpm dlx shadcn@latest add @magicui/neon-gradient-card

Usage

import { NeonGradientCard } from "@/components/magicui/neon-gradient-card";
<NeonGradientCard>
  <div className="p-4">
    <p>Hello</p>
    <span>Hover me</span>
  </div>
</NeonGradientCard>

Props

PropTypeDefaultDescription
classNamestring-The class name to be applied to the component
childrenReactNode-Children elements
borderSizenumber5The size of the border
borderRadiusnumber20The size of the radius
neonColorsobject{ firstColor: "#ff00aa", secondColor: "#00FFF1" }The colors of the neon gradient

Credits