Overlays Core Stable
HoverCard
An anchored panel that opens on hover or focus with a short delay, for richer previews than a tooltip — a profile card, a link preview
Preview
svelte
<script lang="ts">
import { HoverCard } from "fancy-ui-svelte";
</script>
<HoverCard>
{#snippet trigger(describedBy)}
<button
type="button"
aria-describedby={describedBy}
class="text-[13px] font-medium text-violet-300 hover:underline"
>
@alexrivera
</button>
{/snippet}
{#snippet children()}
<div class="flex items-center gap-2.5">
<span class="h-9 w-9 flex-none rounded-full bg-gradient-to-br from-violet-500 to-sky-400"
></span>
<div class="flex flex-col">
<span class="text-[13px] font-semibold">Alex Rivera</span>
<span class="text-muted-foreground text-[11px]">@alexrivera</span>
</div>
</div>
<p class="text-muted-foreground text-[12px] leading-relaxed">
Frontend engineer. Building accessible interfaces, one component at a time.
</p>
{/snippet}
</HoverCard>Installation
pnpm add fancy-ui-svelte
import { HoverCard } from 'fancy-ui-svelte'
Usage
svelte
<script lang="ts">
import { HoverCard } from 'fancy-ui-svelte';
</script>
<HoverCard />Examples
Basic Usage
A profile preview that opens on hover or focus.
svelte
<script lang="ts">
import { HoverCard } from "$lib/fancy-ui/hover-card";
</script>
<HoverCard>
{#snippet trigger(describedBy)}
<button
type="button"
aria-describedby={describedBy}
class="text-[13px] font-medium text-violet-300 hover:underline"
>
@alexrivera
</button>
{/snippet}
{#snippet children()}
<div class="flex items-center gap-2.5">
<span class="h-9 w-9 flex-none rounded-full bg-gradient-to-br from-violet-500 to-sky-400"
></span>
<div class="flex flex-col">
<span class="text-[13px] font-semibold">Alex Rivera</span>
<span class="text-muted-foreground text-[11px]">@alexrivera</span>
</div>
</div>
<p class="text-muted-foreground text-[12px] leading-relaxed">
Frontend engineer. Building accessible interfaces, one component at a time.
</p>
{/snippet}
</HoverCard>With Stats
A richer card with a stats row, anchored above the trigger.
svelte
<script lang="ts">
import { HoverCard } from "$lib/fancy-ui/hover-card";
</script>
<HoverCard side="top">
{#snippet trigger(describedBy)}
<button
type="button"
aria-describedby={describedBy}
class="text-[13px] font-medium text-violet-300 hover:underline"
>
@juno-writes
</button>
{/snippet}
{#snippet children()}
<div class="flex items-center gap-2.5">
<span class="h-9 w-9 flex-none rounded-full bg-gradient-to-br from-emerald-400 to-cyan-500"
></span>
<div class="flex flex-col">
<span class="text-[13px] font-semibold">Juno Park</span>
<span class="text-muted-foreground text-[11px]">@juno-writes</span>
</div>
</div>
<p class="text-muted-foreground text-[12px] leading-relaxed">
Technical writer. Documenting the parts of the codebase everyone else avoids.
</p>
<div class="text-muted-foreground flex gap-3.5 text-[11px]">
<span><strong class="text-foreground">842</strong> followers</span>
<span><strong class="text-foreground">37</strong> articles</span>
</div>
{/snippet}
</HoverCard>Props
| Prop | Type | Default | Description |
|---|---|---|---|
open | boolean | false | Whether the card is open. Bindable |
onOpenChange | (open: boolean) => void | - | Fires whenever the open state changes, from any trigger |
side | "top" | "bottom" | "left" | "right" | "bottom" | Side of the trigger the card opens on. Flips when it would overflow |
align | "start" | "center" | "end" | "center" | Alignment along the trigger's cross axis |
offset | number | 8 | Gap in pixels between the trigger and the card |
openDelay | number | 300 | Ms before the card opens after the pointer enters the trigger. Ignored for focus, which opens immediately |
closeDelay | number | 150 | Ms before the card closes after the pointer leaves. Lets it travel from the trigger to the card without the card vanishing mid-trip |
class | string | - | Additional classes for the card panel |
ref | HTMLDivElement | null | null | Bindable reference to the trigger wrapper |
Slots
| Slot | Description |
|---|---|
trigger | The element that opens the card on hover or focus. Receives the card's id (or undefined while closed) — put it on your own trigger element's aria-describedby |
children | The card's content. Supplementary only — see the README before adding links or buttons |
Links
Related components
Al
AlertDialog
A confirmation dialog for consequential, hard-to-undo actions — fixed confirm/cancel actions, never dismissed by an outside click
Overlays Stable
Di
Dialog
A modal panel with a title, description, body and free-form footer — portals out, traps focus, and locks the page's scroll while open
Overlays Stable
Dr
Drawer
A modal bottom sheet with a grab handle, draggable shut with a downward swipe — for filters, quick actions, or any touch-first task
Overlays Stable