Neon Gradient Card

PreviewCode

Neon Gradient Card

@/demos/NeonGradientCardDemo.tsx

import { NeonGradientCard } from '@/registry/magicui/neon-gradient-card'

export function NeonGradientCardDemo() {
  return (
    <NeonGradientCard class="max-w-sm items-center justify-center text-center">
      <span class="
        pointer-events-none z-10 h-full bg-linear-to-br from-[#ff2975] from-35%
        to-[#00FFF1] bg-clip-text text-center text-3xl leading-none font-bold
        tracking-tighter text-balance whitespace-pre-wrap text-transparent
        md:text-5xl
        xl:text-6xl
        dark:drop-shadow-[0_5px_5px_rgba(0,0,0,0.8)]
      "
      >
        Neon Gradient Card
      </span>
    </NeonGradientCard>
  )
}

Installation

pnpm

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

bun

bunx shadcn@latest add @magicui-solid/neon-gradient-card

yarn

yarn dlx shadcn@latest add @magicui-solid/neon-gradient-card

npm

npx shadcn@latest add @magicui-solid/neon-gradient-card

Usage

import { NeonGradientCard } from '@/components/magicui/neon-gradient-card'

<NeonGradientCard>
  <div class="p-4">
    <p>Hello</p>
    <span>Hover me</span>
  </div>
</NeonGradientCard>

Props

Prop	Type	Default	Description
class	string	-	The class name to be applied to the component
children	JSX.Element	-	Children elements
borderSize	number	5	The size of the border
borderRadius	number	20	The size of the radius
neonColors	{ firstColor, secondColor }	{ firstColor: '#ff00aa', secondColor: '#00FFF1' }	The colors of the neon gradient

Credits

• Credit to @Unleashed-Design

Original:

magicui.design/docs/components/neon-gradient-card