Hover Card

A preview card that opens on hover or focus.

Reviewed by @aidan-neel 3 days ago.

Installation

Copy the command below and run it in your terminal.

bunx @sivir-ui/svelte add hover-card

Usage

Import Hover Card and compose it with sub-components:

import * as HoverCard from '$lib/sivir/components/hover-card';
import * as Avatar from '$lib/sivir/components/avatar';

<HoverCard.Root>
  <HoverCard.Trigger>@username</HoverCard.Trigger>
  <HoverCard.Content>
    <HoverCard.Title>Full name</HoverCard.Title>
    <HoverCard.Description>Bio or description</HoverCard.Description>
  </HoverCard.Content>
</HoverCard.Root>

Examples

Explore Hover Card in different compositions and use cases.

User mention preview

Reviewed by @aidan-neel 3 days ago.

Link preview

Sivir UI

Definition or term

polymorphic

Anatomy

HoverCard.Root - Controls hover card state.

HoverCard.Trigger - Opens the hover card.

HoverCard.Content - Renders hover card content.

HoverCard.Title - Renders the hover card title.

HoverCard.Description - Renders the hover card description.