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 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.

Definition or term

polymorphic