# NeonBorder

> Two-colour neon tube around its content: two beams with white-hot cores chase each other along a faint tube, their glow spilling inside and outside the edge, humming slowly after a flicker on ignition.

- Package: `fancy-ui-svelte` (Svelte 5 + Tailwind CSS v4)
- Category: Effects
- Tags: border, neon, glow, animation, gradient, decoration
- Docs: https://fancy-ui.rama.app/docs/components/neon-border
- Source: https://github.com/RamaHerbin/fancy-ui/tree/main/src/lib/fancy-ui/neon-border

## Import

```svelte
<script lang="ts">
  import { NeonBorder } from 'fancy-ui-svelte';
</script>
```

Setup (once per project): `npm install fancy-ui-svelte`, then add `@import "fancy-ui-svelte/tailwind.css";` after `@import "tailwindcss";` in your main CSS file. Full guide: https://fancy-ui.rama.app/llms.txt

React: `import { NeonBorder } from 'fancy-ui-react';` (same prop names; `class` becomes `className`, snippets become `ReactNode`).

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `color1` | `string` | `"#0496ff"` | First neon color |
| `color2` | `string` | `"#ff0a54"` | Second neon color |
| `animationType` | `"none" \| "half" \| "full"` | `"half"` | How much of the tube is lit: none (two lit corners, static), half (two short beams chasing), full (two long beams that nearly close the ring) |
| `duration` | `number` | `6` | Time for the beams to travel once around, in seconds |

## Snippets

| Snippet | Description |
| --- | --- |
| `children` | Content to display inside the neon border container |

## Examples

### Basic Usage

```svelte
<script lang="ts">
	import { NeonBorder } from "fancy-ui-svelte";
</script>

<NeonBorder>
	<div class="bg-background flex h-full w-full items-center justify-center rounded-lg px-6 py-2">
		<span class="text-sm font-medium">Neon Border</span>
	</div>
</NeonBorder>
```

### Animation Types

Different animation styles.

```svelte
<script lang="ts">
	import { NeonBorder } from "fancy-ui-svelte";
</script>

<div class="flex flex-wrap justify-center gap-6">
	<NeonBorder animationType="none" class="max-w-[200px]">
		<div class="bg-background flex h-full w-full items-center justify-center rounded-lg px-4 py-2">
			<span class="text-xs">none (static)</span>
		</div>
	</NeonBorder>
	<NeonBorder animationType="half" class="max-w-[200px]">
		<div class="bg-background flex h-full w-full items-center justify-center rounded-lg px-4 py-2">
			<span class="text-xs">half</span>
		</div>
	</NeonBorder>
	<NeonBorder animationType="full" class="max-w-[200px]">
		<div class="bg-background flex h-full w-full items-center justify-center rounded-lg px-4 py-2">
			<span class="text-xs">full</span>
		</div>
	</NeonBorder>
</div>
```

### Custom Colors

```svelte
<script lang="ts">
	import { NeonBorder } from "fancy-ui-svelte";
</script>

<div class="flex flex-wrap justify-center gap-6">
	<NeonBorder color1="#22c55e" color2="#3b82f6" class="max-w-[200px]">
		<div class="bg-background flex h-full w-full items-center justify-center rounded-lg px-4 py-2">
			<span class="text-xs">Green → Blue</span>
		</div>
	</NeonBorder>
	<NeonBorder color1="#f59e0b" color2="#ef4444" class="max-w-[200px]">
		<div class="bg-background flex h-full w-full items-center justify-center rounded-lg px-4 py-2">
			<span class="text-xs">Amber → Red</span>
		</div>
	</NeonBorder>
	<NeonBorder color1="#a855f7" color2="#ec4899" class="max-w-[200px]">
		<div class="bg-background flex h-full w-full items-center justify-center rounded-lg px-4 py-2">
			<span class="text-xs">Purple → Pink</span>
		</div>
	</NeonBorder>
</div>
```

### Speed Variations

```svelte
<script lang="ts">
	import { NeonBorder } from "fancy-ui-svelte";
</script>

<div class="flex flex-wrap justify-center gap-6">
	<NeonBorder duration={2} class="max-w-[200px]">
		<div class="bg-background flex h-full w-full items-center justify-center rounded-lg px-4 py-2">
			<span class="text-xs">Fast (2s)</span>
		</div>
	</NeonBorder>
	<NeonBorder duration={6} class="max-w-[200px]">
		<div class="bg-background flex h-full w-full items-center justify-center rounded-lg px-4 py-2">
			<span class="text-xs">Default (6s)</span>
		</div>
	</NeonBorder>
	<NeonBorder duration={15} class="max-w-[200px]">
		<div class="bg-background flex h-full w-full items-center justify-center rounded-lg px-4 py-2">
			<span class="text-xs">Slow (15s)</span>
		</div>
	</NeonBorder>
</div>
```

### Interactive Playground

```svelte
<script lang="ts">
	import { NeonBorder } from "fancy-ui-svelte";
	import PropsPlayground from "$lib/components/PropsPlayground.svelte";
</script>

<PropsPlayground
	controls={[
		{ key: "color1", type: "color", label: "Color 1" },
		{ key: "color2", type: "color", label: "Color 2" },
		{
			key: "animationType",
			type: "select",
			label: "Animation Type",
			options: [
				{ value: "none", label: "None (static)" },
				{ value: "half", label: "Half" },
				{ value: "full", label: "Full" },
			],
		},
		{ key: "duration", type: "range", label: "Duration (s)", min: 1, max: 20, step: 1 },
	]}
	initialValues={{ color1: "#0496ff", color2: "#ff0a54", animationType: "half", duration: 6 }}
>
	{#snippet preview(values)}
		<div class="flex items-center justify-center py-8">
			<NeonBorder
				color1={values.color1 as string}
				color2={values.color2 as string}
				animationType={values.animationType as "none" | "half" | "full"}
				duration={values.duration as number}
			>
				<div
					class="bg-background flex h-full w-full items-center justify-center rounded-lg px-8 py-3"
				>
					<span class="font-medium">Neon Border</span>
				</div>
			</NeonBorder>
		</div>
	{/snippet}
</PropsPlayground>
```