Hover Card — Componentes

🚀 saastro/ui (Astro)

@nextjs

The React Framework - created and maintained by @vercel.

Joined December 2021

⚛️ shadcn/ui (React)

Installation

npx saastro add hover-card

Usage

---
import { HoverCard, HoverCardTrigger, HoverCardContent } from "@/components/ui-saastro/hover-card";
---

<HoverCard>
  <HoverCardTrigger>
    <span>Hover over me</span>
  </HoverCardTrigger>
  <HoverCardContent>
    Content shown on hover
  </HoverCardContent>
</HoverCard>

Props

Prop	Type	Default	Description
openDelay	`number`	`200`	Delay before showing (ms)
closeDelay	`number`	`300`	Delay before hiding (ms)

HoverCardContent

Prop	Type	Default	Description
side	`"top" \| "bottom" \| "left" \| "right"`	`"bottom"`	Preferred side
align	`"start" \| "center" \| "end"`	`"center"`	Alignment

Accessibility

Shows on hover and focus for keyboard users
Uses configurable delays to prevent flickering
Content remains visible when hovering over it

Performance

Performance Benchmark

Bundle Size

Hydration

0ms vs

Sin hydration

Hover Response

Saastro (Vanilla JS)

shadcn (React)