Navigation Fancy Stable
LineHoverLink
Link component with 12 animated underline hover effects — pure CSS, no JS on hover
Preview
svelte
<script lang="ts">
import { LineHoverLink } from 'fancy-ui-svelte';
</script>
<LineHoverLink />Installation
pnpm add fancy-ui-svelte
import { LineHoverLink } from 'fancy-ui-svelte'
Usage
svelte
<script lang="ts">
import { LineHoverLink } from 'fancy-ui-svelte';
</script>
<LineHoverLink />Examples
All Variants
12 animated underline effects.
svelte
<script lang="ts">
import { LineHoverLink } from "$lib/fancy-ui/line-hover-link";
import type { LineHoverVariant } from "$lib/fancy-ui/line-hover-link";
const variants: { variant: LineHoverVariant; label: string }[] = [
{ variant: "slide", label: "Slide" },
{ variant: "double", label: "Double" },
{ variant: "grow", label: "Grow" },
{ variant: "strike", label: "Strike" },
{ variant: "fade", label: "Fade" },
{ variant: "pulse", label: "Pulse" },
{ variant: "swap", label: "Swap" },
{ variant: "sweep", label: "Sweep" },
{ variant: "bounce", label: "Bounce" },
{ variant: "arc", label: "Arc" },
{ variant: "scribble", label: "Scribble" },
{ variant: "ink", label: "Ink" },
];
</script>
<div class="flex min-h-[280px] items-center justify-center p-12">
<div class="grid grid-cols-3 gap-x-16 gap-y-10 md:grid-cols-4">
{#each variants as { variant, label }}
<div class="text-center">
<LineHoverLink {variant} href="#" class="text-lg font-medium">
{label}
</LineHoverLink>
</div>
{/each}
</div>
</div>Navigation Example
svelte
<script lang="ts">
import { LineHoverLink } from "$lib/fancy-ui/line-hover-link";
</script>
<div class="flex min-h-[120px] items-center justify-center">
<nav class="flex gap-8">
<LineHoverLink variant="slide" href="#" class="text-muted-foreground">Home</LineHoverLink>
<LineHoverLink variant="slide" href="#" class="text-muted-foreground">About</LineHoverLink>
<LineHoverLink variant="slide" href="#" class="text-muted-foreground">Services</LineHoverLink>
<LineHoverLink variant="slide" href="#" class="text-muted-foreground">Contact</LineHoverLink>
</nav>
</div>Props
| Prop | Type | Default | Description |
|---|---|---|---|
variant | "slide" | "double" | "grow" | "strike" | "fade" | "pulse" | "swap" | "sweep" | "bounce" | "arc" | "scribble" | "ink" | "slide" | The animation variant |
href | string | "#" | Link href |
target | string | - | Link target attribute |
rel | string | - | Link rel attribute |
aria-label | string | - | Accessible label |
Slots
| Slot | Description |
|---|---|
children | Link text content |
Links
Related components
Br
Breadcrumb
A data-driven trail of links with automatic truncation, a decorative separator, and the current page marked for assistive tech.
Navigation Stable
Co
CommandMenu
A modal search palette over a flat vocabulary of items — grouped results, diacritic-insensitive filtering, match highlighting, and full keyboard navigation with focus that never leaves the search field.
Navigation Stable
Co
ContextMenu
A menu that opens at the pointer on right-click, sharing DropdownMenu's item, submenu and keyboard behaviour but anchored to a virtual point instead of a trigger element.
Navigation Stable