Getting Started
Components
Special Effects
Animations
Text Animations
Backgrounds
A beautiful neon card effect
Svelte Is Amazing
Installation
pnpm dlx shadcn-svelte@latest add https://sv-animations.vercel.app/r/neon-gradient-card.json
Copy the Source Code
Copy and paste the following code into your project:
neon-gradient-card.svelte
index.ts
Add Tailwind CSS
Add the following to your routes/layout.css file:
/src/routes/layout.css
Folder Structure
Folder Structure
Props
NeonGradientCard
A component for Neon Gradient Card.
| Name | Type | Default | Description |
|---|---|---|---|
class | string | "" | Additional CSS classes to apply |
borderSize | number | 2 | Size of the border |
borderRadius | number | 20 | Radius of the border |
neonColors | NeonColorsProps | { firstColor: "#ff00aa", secondColor: "#00FFF1" } | Colors of the neon effect |
children | Snippet | required | The content to display inside the card |