Hover Card

A card that appears when hovering over a trigger element, providing additional information or context.

How to Import

Add this import to your component file

app/page.tsx

1import {
2  HoverCard,
3  HoverCardContent,
4  HoverCardTrigger,
5} from "@/components/lightswind/hover-card";

Props

Properties and options for customizing this component

Name	Type	Default	Description	Required

open	boolean	-	Whether the hover card is open (controlled)	Optional
onOpenChange	function	-	Callback when the open state changes	Optional
defaultOpen	boolean	false	Whether the hover card is open by default (uncontrolled)	Optional
openDelay	number	700	Delay in ms before opening	Optional
closeDelay	number	300	Delay in ms before closing	Optional

Basic Usage

Here’s a simple example of how to use this component

app/page.tsx

1import {
2  HoverCard,
3  HoverCardContent,
4  HoverCardTrigger,
5} from "@/components/lightswind/hover-card";
6import { Button } from "@/components/lightswind/button";
7
8export function HoverCardDemo() {
9  return (
10    <HoverCard>
11      <HoverCardTrigger asChild>
12        <Button variant="link">Hover me</Button>
13      </HoverCardTrigger>
14      <HoverCardContent>
15        <div className="p-2">
16          <h4 className="font-medium">Hover Card Content</h4>
17          <p className="text-sm text-muted-foreground">
18            Additional information displayed on hover.
19          </p>
20        </div>
21      </HoverCardContent>
22    </HoverCard>
23  );
24}

Variants

Different visual and behavioral variants of the component

User Profile Preview Variant

A hover card displaying user avatar, name, bio, and social stats.

@nextjs

Previousdropdown-menu

Nextpopover

A product byＭＵＨＩＬＡＮ and Team❤️.

Hover Card

A card that appears when hovering over a trigger element, providing additional information or context.

...

How to Import

Add this import to your component file

app/page.tsx

1import {
2  HoverCard,
3  HoverCardContent,
4  HoverCardTrigger,
5} from "@/components/lightswind/hover-card";

Props

Properties and options for customizing this component

Name	Type	Default	Description	Required

open	boolean	-	Whether the hover card is open (controlled)	Optional
onOpenChange	function	-	Callback when the open state changes	Optional
defaultOpen	boolean	false	Whether the hover card is open by default (uncontrolled)	Optional
openDelay	number	700	Delay in ms before opening	Optional
closeDelay	number	300	Delay in ms before closing	Optional

Basic Usage

Here’s a simple example of how to use this component

app/page.tsx

1import {
2  HoverCard,
3  HoverCardContent,
4  HoverCardTrigger,
5} from "@/components/lightswind/hover-card";
6import { Button } from "@/components/lightswind/button";
7
8export function HoverCardDemo() {
9  return (
10    <HoverCard>
11      <HoverCardTrigger asChild>
12        <Button variant="link">Hover me</Button>
13      </HoverCardTrigger>
14      <HoverCardContent>
15        <div className="p-2">
16          <h4 className="font-medium">Hover Card Content</h4>
17          <p className="text-sm text-muted-foreground">
18            Additional information displayed on hover.
19          </p>
20        </div>
21      </HoverCardContent>
22    </HoverCard>
23  );
24}

Variants

Different visual and behavioral variants of the component

User Profile Preview Variant

A hover card displaying user avatar, name, bio, and social stats.

@nextjs

Previousdropdown-menu

Nextpopover

A product byＭＵＨＩＬＡＮ and Team❤️.

Hover Card

How to Import

Props

Basic Usage

Variants

User Profile Preview Variant

On This Page

Contribute

Hover Card

How to Import

Props

Basic Usage

Variants

User Profile Preview Variant

On This Page

Contribute

React Hover Card Component - Lightswind UI

Key Details of React Hover Card

Hover Card

How to Import

Props

Basic Usage

Variants

User Profile Preview Variant

On This Page

Contribute

Hover Card

How to Import

Props

Basic Usage

Variants

User Profile Preview Variant

On This Page

Contribute