Getting Started
Components
Device Mocks
Special Effects
Animations
Text Animations
Buttons
Neon Gradient Card
import { NeonGradientCard } from "@/registry/magicui/neon-gradient-card";
export function NeonGradientCardDemo() {
return (
<NeonGradientCard className="max-w-sm items-center justify-center text-center">
<span className="pointer-events-none z-10 h-full whitespace-pre-wrap bg-gradient-to-br from-[#ff2975] from-35% to-[#00FFF1] bg-clip-text text-center text-3xl md:text-5xl xl:text-6xl font-bold leading-none tracking-tighter text-balance text-transparent dark:drop-shadow-[0_5px_5px_rgba(0,0,0,0.8)]">
Neon Gradient Card
</span>
</NeonGradientCard>
);
}
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
Prop | Type | Default | Description |
---|---|---|---|
className | string | - | The class name to be applied to the component |
children | ReactNode | - | Children elements |
borderSize | number | 5 | The size of the border |
borderRadius | number | 20 | The size of the radius |
neonColors | object | { firstColor: "#ff00aa", secondColor: "#00FFF1" } | The colors of the neon gradient |
Credits
- Credit to @Unleashed-Design
Limited Time Offer
Ship Faster with Magic UI ProMagic UI Pro
Stop building from scratch.
Get 8 production-ready templates and 50+ premium components that your users will love.
✓
Next.js 15 + TypeScript ready✓
Copy, paste, customize in minutes✓
Save 100+ hours of development