On this page

Hover Card

---
import { Avatar, AvatarFallback, AvatarImage } from "@/components/starwind/avatar";
import { Button } from "@/components/starwind/button";
import { HoverCard, HoverCardContent, HoverCardTrigger } from "@/components/starwind/hover-card";
---

<HoverCard>
  <HoverCardTrigger asChild>
    <Button variant="outline">@starwind</Button>
  </HoverCardTrigger>
  <HoverCardContent class="w-80" align="start">
    <div class="flex justify-between gap-4">
      <Avatar class="shrink-0">
        <AvatarImage src="https://i.pravatar.cc/150?u=starwind" alt="Starwind UI" />
        <AvatarFallback>SW</AvatarFallback>
      </Avatar>
      <div class="space-y-1">
        <h4 class="text-sm font-semibold">Starwind UI</h4>
        <p class="text-muted-foreground text-sm">
          Accessible Astro components styled with Tailwind CSS.
        </p>
        <span class="text-muted-foreground block pt-2 text-xs">Built for Astro developers</span>
      </div>
    </div>
  </HoverCardContent>
</HoverCard>

import { Avatar, AvatarFallback, AvatarImage } from "@/components/starwind/avatar";
import { Button } from "@/components/starwind/button";
import { HoverCard, HoverCardContent, HoverCardTrigger } from "@/components/starwind/hover-card";

export function Example() {
  return (
    <HoverCard>
      <HoverCardTrigger asChild>
        <Button variant="outline">@starwind</Button>
      </HoverCardTrigger>
      <HoverCardContent className="w-80" align="start">
        <div className="flex justify-between gap-4">
          <Avatar className="shrink-0">
            <AvatarImage src="https://i.pravatar.cc/150?u=starwind" alt="Starwind UI" />
            <AvatarFallback>SW</AvatarFallback>
          </Avatar>
          <div className="space-y-1">
            <h4 className="text-sm font-semibold">Starwind UI</h4>
            <p className="text-muted-foreground text-sm">
              Accessible Astro components styled with Tailwind CSS.
            </p>
            <span className="text-muted-foreground block pt-2 text-xs">Built for Astro developers</span>
          </div>
        </div>
      </HoverCardContent>
    </HoverCard>
  );
}

Installation

pnpx starwind@latest add hover-card

npx starwind@latest add hover-card

yarn dlx starwind@latest add hover-card

Usage

---
import { Avatar, AvatarFallback, AvatarImage } from "@/components/starwind/avatar";
import { Button } from "@/components/starwind/button";
import { HoverCard, HoverCardContent, HoverCardTrigger } from "@/components/starwind/hover-card";
---

<HoverCard>
  <HoverCardTrigger asChild>
    <Button variant="outline">@starwind</Button>
  </HoverCardTrigger>
  <HoverCardContent class="w-80" align="start">
    <div class="flex justify-between gap-4">
      <Avatar class="shrink-0">
        <AvatarImage src="https://i.pravatar.cc/150?u=starwind" alt="Starwind UI" />
        <AvatarFallback>SW</AvatarFallback>
      </Avatar>
      <div class="space-y-1">
        <h4 class="text-sm font-semibold">Starwind UI</h4>
        <p class="text-muted-foreground text-sm">
          Accessible Astro components styled with Tailwind CSS.
        </p>
        <span class="text-muted-foreground block pt-2 text-xs">Built for Astro developers</span>
      </div>
    </div>
  </HoverCardContent>
</HoverCard>

import { Avatar, AvatarFallback, AvatarImage } from "@/components/starwind/avatar";
import { Button } from "@/components/starwind/button";
import { HoverCard, HoverCardContent, HoverCardTrigger } from "@/components/starwind/hover-card";

export function Example() {
  return (
    <HoverCard>
      <HoverCardTrigger asChild>
        <Button variant="outline">@starwind</Button>
      </HoverCardTrigger>
      <HoverCardContent className="w-80" align="start">
        <div className="flex justify-between gap-4">
          <Avatar className="shrink-0">
            <AvatarImage src="https://i.pravatar.cc/150?u=starwind" alt="Starwind UI" />
            <AvatarFallback>SW</AvatarFallback>
          </Avatar>
          <div className="space-y-1">
            <h4 className="text-sm font-semibold">Starwind UI</h4>
            <p className="text-muted-foreground text-sm">
              Accessible Astro components styled with Tailwind CSS.
            </p>
            <span className="text-muted-foreground block pt-2 text-xs">Built for Astro developers</span>
          </div>
        </div>
      </HoverCardContent>
    </HoverCard>
  );
}

Composition

Use a trigger and content inside the root:

HoverCard
├── HoverCardTrigger
└── HoverCardContent

When to Use

Use Hover Card for optional context that appears when a trigger receives hover or keyboard focus.

Profile Preview

Use asChild on the trigger when you want to reuse an existing interactive component like Button.

Astro

---
import { Avatar, AvatarFallback, AvatarImage } from "@/components/starwind/avatar";
import { Button } from "@/components/starwind/button";
import { HoverCard, HoverCardContent, HoverCardTrigger } from "@/components/starwind/hover-card";
---

<div class="flex flex-wrap items-center gap-4">
  <HoverCard>
    <HoverCardTrigger asChild>
      <Button variant="outline">@starwind</Button>
    </HoverCardTrigger>
    <HoverCardContent align="start" class="w-80">
      <div class="flex justify-between gap-4">
        <Avatar class="shrink-0">
          <AvatarImage src="https://i.pravatar.cc/150?u=starwind" alt="Starwind UI" />
          <AvatarFallback>SW</AvatarFallback>
        </Avatar>
        <div class="space-y-1">
          <h4 class="text-sm font-semibold">Starwind UI</h4>
          <p class="text-muted-foreground text-sm">
            Accessible Astro components styled with Tailwind CSS.
          </p>
          <div class="flex items-center pt-2">
            <span class="text-muted-foreground text-xs">Built for Astro developers</span>
          </div>
        </div>
      </div>
    </HoverCardContent>
  </HoverCard>

  <HoverCard openDelay={200} closeDelay={200}>
    <HoverCardTrigger asChild>
      <Button href="https://astro.build" variant="ghost">Astro</Button>
    </HoverCardTrigger>
    <HoverCardContent side="right" align="start" class="w-80">
      <div class="space-y-2">
        <h4 class="text-sm font-semibold">Astro</h4>
        <p class="text-muted-foreground text-sm">
          A web framework for content-driven sites with fast-by-default performance.
        </p>
      </div>
    </HoverCardContent>
  </HoverCard>
</div>

import { Avatar, AvatarFallback, AvatarImage } from "@/components/starwind/avatar";
import { Button } from "@/components/starwind/button";
import { HoverCard, HoverCardContent, HoverCardTrigger } from "@/components/starwind/hover-card";

export function Example() {
  return (
    <>
      <div className="flex flex-wrap items-center gap-4">
        <HoverCard>
          <HoverCardTrigger asChild>
            <Button variant="outline">@starwind</Button>
          </HoverCardTrigger>
          <HoverCardContent align="start" className="w-80">
            <div className="flex justify-between gap-4">
              <Avatar className="shrink-0">
                <AvatarImage src="https://i.pravatar.cc/150?u=starwind" alt="Starwind UI" />
                <AvatarFallback>SW</AvatarFallback>
              </Avatar>
              <div className="space-y-1">
                <h4 className="text-sm font-semibold">Starwind UI</h4>
                <p className="text-muted-foreground text-sm">
                  Accessible Astro components styled with Tailwind CSS.
                </p>
                <div className="flex items-center pt-2">
                  <span className="text-muted-foreground text-xs">Built for Astro developers</span>
                </div>
              </div>
            </div>
          </HoverCardContent>
        </HoverCard>

        <HoverCard openDelay={200} closeDelay={200}>
          <HoverCardTrigger asChild>
            <Button href="https://astro.build" variant="ghost">Astro</Button>
          </HoverCardTrigger>
          <HoverCardContent side="right" align="start" className="w-80">
            <div className="space-y-2">
              <h4 className="text-sm font-semibold">Astro</h4>
              <p className="text-muted-foreground text-sm">
                A web framework for content-driven sites with fast-by-default performance.
              </p>
            </div>
          </HoverCardContent>
        </HoverCard>
      </div>
    </>
  );
}

Side and Alignment

Use side, align, and sideOffset on HoverCardContent to control placement.

---
import { Button } from "@/components/starwind/button";
import { HoverCard, HoverCardContent, HoverCardTrigger } from "@/components/starwind/hover-card";
---

<div class="grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
  <HoverCard openDelay={150}>
    <HoverCardTrigger asChild>
      <Button variant="outline" class="w-full">Top</Button>
    </HoverCardTrigger>
    <HoverCardContent side="top" sideOffset={8}>Appears above the trigger.</HoverCardContent>
  </HoverCard>

  <HoverCard openDelay={150}>
    <HoverCardTrigger asChild>
      <Button variant="outline" class="w-full">Right</Button>
    </HoverCardTrigger>
    <HoverCardContent side="right" align="start" sideOffset={8}>
      Appears to the right and aligns to the start.
    </HoverCardContent>
  </HoverCard>

  <HoverCard openDelay={150}>
    <HoverCardTrigger asChild>
      <Button variant="outline" class="w-full">Bottom</Button>
    </HoverCardTrigger>
    <HoverCardContent side="bottom" align="end" sideOffset={8}>
      Appears below and aligns to the end.
    </HoverCardContent>
  </HoverCard>

  <HoverCard openDelay={150}>
    <HoverCardTrigger asChild>
      <Button variant="outline" class="w-full">Left</Button>
    </HoverCardTrigger>
    <HoverCardContent side="left" sideOffset={8}>Appears to the left.</HoverCardContent>
  </HoverCard>
</div>

import { Button } from "@/components/starwind/button";
import { HoverCard, HoverCardContent, HoverCardTrigger } from "@/components/starwind/hover-card";

export function Example() {
  return (
    <>
      <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
        <HoverCard openDelay={150}>
          <HoverCardTrigger asChild>
            <Button variant="outline" className="w-full">Top</Button>
          </HoverCardTrigger>
          <HoverCardContent side="top" sideOffset={8}>Appears above the trigger.</HoverCardContent>
        </HoverCard>

        <HoverCard openDelay={150}>
          <HoverCardTrigger asChild>
            <Button variant="outline" className="w-full">Right</Button>
          </HoverCardTrigger>
          <HoverCardContent side="right" align="start" sideOffset={8}>
            Appears to the right and aligns to the start.
          </HoverCardContent>
        </HoverCard>

        <HoverCard openDelay={150}>
          <HoverCardTrigger asChild>
            <Button variant="outline" className="w-full">Bottom</Button>
          </HoverCardTrigger>
          <HoverCardContent side="bottom" align="end" sideOffset={8}>
            Appears below and aligns to the end.
          </HoverCardContent>
        </HoverCard>

        <HoverCard openDelay={150}>
          <HoverCardTrigger asChild>
            <Button variant="outline" className="w-full">Left</Button>
          </HoverCardTrigger>
          <HoverCardContent side="left" sideOffset={8}>Appears to the left.</HoverCardContent>
        </HoverCard>
      </div>
    </>
  );
}

Non-hoverable Content

By default, moving the pointer from trigger to content keeps the card open. Set disableHoverableContent to close immediately when leaving the trigger.

---
import { Button } from "@/components/starwind/button";
import { HoverCard, HoverCardContent, HoverCardTrigger } from "@/components/starwind/hover-card";
---

<HoverCard>
  <HoverCardTrigger asChild>
    <Button variant="outline">Hoverable content (default)</Button>
  </HoverCardTrigger>
  <HoverCardContent class="max-w-[220px]">
    You can move your pointer into this card without closing it.
  </HoverCardContent>
</HoverCard>

<HoverCard disableHoverableContent>
  <HoverCardTrigger asChild>
    <Button variant="outline">Trigger-only hover</Button>
  </HoverCardTrigger>
  <HoverCardContent class="max-w-[220px]">
    This card closes when the pointer leaves the trigger.
  </HoverCardContent>
</HoverCard>

import { Button } from "@/components/starwind/button";
import { HoverCard, HoverCardContent, HoverCardTrigger } from "@/components/starwind/hover-card";

export function Example() {
  return (
    <>
      <HoverCard>
        <HoverCardTrigger asChild>
          <Button variant="outline">Hoverable content (default)</Button>
        </HoverCardTrigger>
        <HoverCardContent className="max-w-[220px]">
          You can move your pointer into this card without closing it.
        </HoverCardContent>
      </HoverCard>

      <HoverCard disableHoverableContent>
        <HoverCardTrigger asChild>
          <Button variant="outline">Trigger-only hover</Button>
        </HoverCardTrigger>
        <HoverCardContent className="max-w-[220px]">
          This card closes when the pointer leaves the trigger.
        </HoverCardContent>
      </HoverCard>
    </>
  );
}

API Reference

Styled Component API

These props are added or materially changed by the installed styled component. Standard HTML attributes remain available through the inherited interfaces noted below. Expand a prop to see named type definitions and framework-specific imports. Follow the Primitive and Runtime links for lower-level behavior props.

Hover Card Trigger

Inherits a attributes.

Contains the following additional props:

Prop Type Default

asChild boolean false

Description: Merges the component behavior and props into its child element.
Classification: Primitive override
Primitive prop: preview-card.Trigger.asChild

closeDelay number —

Description: Sets the delay in milliseconds before closing.
Classification: Primitive override
Primitive prop: preview-card.Trigger.closeDelay

openDelay number —

Description: Sets the delay in milliseconds before opening.
Classification: Primitive override
Primitive prop: preview-card.Trigger.openDelay

Inherits div attributes.

Contains the following additional props:

Prop Type Default

disablePortal boolean false

Description: Keeps the public Portal wrapper inline instead of moving it to a target.
Classification: Wrapper prop

portalContainer string —

Description: Sets the CSS selector for the public Portal wrapper target.
Classification: Wrapper prop

positionerClass string —

Description: Adds classes to the generated floating positioner element.
Classification: Wrapper prop

sideOffset number 4

Description: Sets the distance in pixels between floating content and its anchor.
Classification: Primitive override
Primitive prop: preview-card.Popup.sideOffset

Primitive And Runtime API

Use these references when you need the lower-level behavior APIs behind Hover Card.

Primitive API

Preview Card Primitive

Runtime API

Preview Card primitive: createPreviewCard from @starwind-ui/runtime/preview-card

Changelog

View version history v2.2.0 4 releases

v2.2.0

Added portalContainer and disablePortal to HoverCardContent for custom portal targets and inline rendering.

v2.1.0

Added positionerClass to HoverCardContent so the floating positioner can be styled directly.
Moved the default stacking level from the content to the positioner.

v2.0.2

Named the generated aggregate default export so React and Astro tooling can identify the installed component cleanly.

v2.0.0

Rebuilt Hover Card on Starwind Runtime for hover and focus state, floating placement, and dismissal.
See the Preview Card Primitive for the underlying unstyled anatomy and behavior API.