Installation
npx shadcn-svelte@next add neon-gradient-card
Add the following animations to your
tailwind.config.js:
{
theme: {
extend: {
animation: {
'background-position-spin': 'background-position-spin 3000ms infinite alternate'
},
keyframes: {
'background-position-spin': {
'0%': { backgroundPosition: 'top center' },
'100%': { backgroundPosition: 'bottom center' }
}
}
}
}
}
Usage
<script lang="ts">
import { NeonGradientCard } from "$lib/components/magic/neon-gradient-card";
</script>
<NeonGradientCard>
<div class="text-lg font-semibold">Your content here</div>
<p class="text-sm">With a beautiful neon gradient border</p>
</NeonGradientCard>
Examples
Custom Colors
<NeonGradientCard
neonColors={{
firstColor: '#ff6b6b',
secondColor: '#4ecdc4'
}}
>
<h3>Custom Neon Colors</h3>
<p>Red to cyan gradient</p>
</NeonGradientCard>
Custom Border Size and Radius
<NeonGradientCard borderSize={4} borderRadius={32}>
<h3>Larger Border</h3>
<p>More rounded corners</p>
</NeonGradientCard>
Smaller Card
<NeonGradientCard class="w-64" borderSize={1} borderRadius={12}>
<div class="text-center">
<h4>Compact Card</h4>
<p class="text-xs">Subtle neon effect</p>
</div>
</NeonGradientCard>
Props
The width of the neon border in pixels.
The border radius of the card in pixels.
An object containing firstColor and secondColor properties that define the gradient colors.interface NeonColorsProps {
firstColor: string;
secondColor: string;
}
Additional CSS classes to apply to the card container.
The content to render inside the card.
Features
- Animated Gradient: The neon border continuously animates between the two specified colors
- Glow Effect: Includes a blur effect that creates a glowing appearance
- Responsive: Automatically adjusts to container size changes
- Dark Mode Support: Works seamlessly with light and dark themes
- Customizable: Full control over colors, border size, and border radius