Hover Card | arctis/ui

Show a lightweight preview for a link or trigger. It opens on hover or focus and closes when you leave.

tsx

1import {2  Avatar,3  AvatarFallback,4  AvatarImage,5} from "@/components/ui/avatar"6import {7  HoverCard,8  HoverCardContent,9  HoverCardTrigger,10} from "@/components/ui/hover-card"1112export function Example() {13  return (14    <HoverCard>15      <HoverCardTrigger asChild>16        <a17          href="#"18          className="text-sm font-medium tracking-wide underline-offset-4 hover:underline"19          onClick={(event) => event.preventDefault()}20        >21          @arctis22        </a>23      </HoverCardTrigger>24      <HoverCardContent className="w-80">25        <div className="flex gap-4">26          <Avatar>27            <AvatarImage src="/assets/brand/demos/avatars/avatar-1.png" alt="Arctis" />28            <AvatarFallback>AR</AvatarFallback>29          </Avatar>30          <div className="flex flex-col gap-1">31            <h4 className="text-sm font-medium tracking-wide">@arctis</h4>32            <p className="text-sm tracking-wide text-muted-foreground">33              A modern component library for building beautiful interfaces.34            </p>35            <div className="mt-1 text-xs tracking-wide text-muted-foreground">36              Joined January 202437            </div>38          </div>39        </div>40      </HoverCardContent>41    </HoverCard>42  )43}

Installation

npx @arctis-sh/@arctis-sh/ui@latest add hover-card

Usage

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

1<HoverCard>2  <HoverCardTrigger>Hover</HoverCardTrigger>3  <HoverCardContent>4    Product designer in Oslo, working on design systems.5  </HoverCardContent>6</HoverCard>

Composition

HoverCard
├── HoverCardTrigger
└── HoverCardContent

Trigger Delays

Set shared delays with openDelay and closeDelay on HoverCard, or override them per trigger with delay and closeDelay.

1<HoverCard openDelay={100} closeDelay={200}>2  <HoverCardTrigger>Hover</HoverCardTrigger>3  <HoverCardContent>Content</HoverCardContent>4</HoverCard>

1<HoverCard>2  <HoverCardTrigger delay={100} closeDelay={200}>3    Hover4  </HoverCardTrigger>5  <HoverCardContent>Content</HoverCardContent>6</HoverCard>

Positioning

Use side and align on HoverCardContent to control placement.

1<HoverCard>2  <HoverCardTrigger>Hover</HoverCardTrigger>3  <HoverCardContent side="top" align="start">4    Content5  </HoverCardContent>6</HoverCard>

Basic

Hover the link to preview the profile.

@arctis

tsx

1import {2  Avatar,3  AvatarFallback,4  AvatarImage,5} from "@/components/ui/avatar"6import {7  HoverCard,8  HoverCardContent,9  HoverCardTrigger,10} from "@/components/ui/hover-card"1112export function Example() {13  return (14    <HoverCard>15      <HoverCardTrigger asChild>16        <a17          href="#"18          className="text-sm font-medium tracking-wide underline-offset-4 hover:underline"19          onClick={(event) => event.preventDefault()}20        >21          @arctis22        </a>23      </HoverCardTrigger>24      <HoverCardContent className="w-80">25        <div className="flex gap-4">26          <Avatar>27            <AvatarImage src="/assets/brand/demos/avatars/avatar-1.png" alt="Arctis" />28            <AvatarFallback>AR</AvatarFallback>29          </Avatar>30          <div className="flex flex-col gap-1">31            <h4 className="text-sm font-medium tracking-wide">@arctis</h4>32            <p className="text-sm tracking-wide text-muted-foreground">33              A modern component library for building beautiful interfaces.34            </p>35            <div className="mt-1 text-xs tracking-wide text-muted-foreground">36              Joined January 202437            </div>38          </div>39        </div>40      </HoverCardContent>41    </HoverCard>42  )43}

Sides

Place the card on whichever side of the trigger fits best.

tsx

1import { Button } from "@/components/ui/button"2import {3  HoverCard,4  HoverCardContent,5  HoverCardTrigger,6} from "@/components/ui/hover-card"78export function Example() {9  return (10    <div className="flex flex-wrap items-center gap-2">11      <HoverCard>12        <HoverCardTrigger asChild>13          <Button variant="outline">Left</Button>14        </HoverCardTrigger>15        <HoverCardContent side="left">16          Opens on the left17        </HoverCardContent>18      </HoverCard>19      <HoverCard>20        <HoverCardTrigger asChild>21          <Button variant="outline">Top</Button>22        </HoverCardTrigger>23        <HoverCardContent side="top">Opens on top</HoverCardContent>24      </HoverCard>25      <HoverCard>26        <HoverCardTrigger asChild>27          <Button variant="outline">Bottom</Button>28        </HoverCardTrigger>29        <HoverCardContent side="bottom">Opens below</HoverCardContent>30      </HoverCard>31      <HoverCard>32        <HoverCardTrigger asChild>33          <Button variant="outline">Right</Button>34        </HoverCardTrigger>35        <HoverCardContent side="right">36          Opens on the right37        </HoverCardContent>38      </HoverCard>39    </div>40  )41}

API Reference

Prop	Type	Default
open	boolean	—
defaultOpen	boolean	false
onOpenChange	(open: boolean) => void	—
openDelay	number	700
closeDelay	number	300

1<HoverCard>2  <HoverCardTrigger>Hover</HoverCardTrigger>3  <HoverCardContent>Content</HoverCardContent>4</HoverCard>

HoverCardTrigger

Prop	Type	Default
asChild	boolean	false
delay	number	—
closeDelay	number	—

When delay or closeDelay is omitted, the corresponding value from the root is used.

1<HoverCardTrigger asChild>2  <a href="#">@jordan</a>3</HoverCardTrigger>

HoverCardContent

Prop	Type	Default
side	"top" \| "bottom" \| "left" \| "right"	"bottom"
align	"start" \| "center" \| "end"	"center"
sideOffset	number	4
alignOffset	number	0
className	string	—

1<HoverCardContent side="top" align="start">2  Content3</HoverCardContent>