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

Command Palette

Search for a command to run...

Docs
Neon Gradient Card

Neon Gradient Card

A beautiful neon card effect

Neon Gradient Card

Installation

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