Hover card

A preview of what a link leads to, opening while the link is pointed at or focused: the Popover's panel, a little apart from it.

Install

terminal

# once per project: where @zeroui items come frompnpm dlx shadcn@latest registry add @zeroui=https://zeroui.catforest.dev/r/{name}.jsonpnpm dlx shadcn@latest add @zeroui/hover-card

Examples

A driver behind a name

Taken by Mara K. at 21:10.

hover-card-driver.tsx

import { Avatar, AvatarFallback, AvatarImage } from "@/components/zero/avatar";import {  HoverCard,  HoverCardContent,  HoverCardTrigger,} from "@/components/zero/hover-card";export default function HoverCardDriver() {  return (    <p className="font-medium font-zero-text text-zero-md text-zero-text-2">      Taken by{" "}      <HoverCard>        <HoverCardTrigger          href="#mara"          className="font-bold text-zero-text underline decoration-zero-accent decoration-2 underline-offset-4 outline-none focus-visible:outline-(length:--zero-stroke-thin) focus-visible:outline-zero-focus"        >          Mara K.        </HoverCardTrigger>        <HoverCardContent>          <div className="flex items-center gap-3">            <Avatar>              <AvatarImage src="/samples/portrait-a.svg" alt="" />              <AvatarFallback>MK</AvatarFallback>            </Avatar>            <div>              <div className="font-black font-zero italic">Mara K.</div>              <div className="text-zero-text-3 text-zero-xs">                Driver · 41 jobs              </div>            </div>          </div>          <p className="text-zero-text-2">            Knows the rail yards. Never late on a rush job this month.          </p>        </HoverCardContent>      </HoverCard>{" "}      at 21:10.    </p>  );}

Behaviour

It grows out of the link and folds back faster. Keep it to what pointer users can do without; anything needed belongs on the page or in a Popover.

Props

HoverCardContent

Prop	Type	Default	Description
side	"top" \| "bottom" \| "left" \| "right"	"bottom"	Where it opens from the link.
align	"start" \| "center" \| "end"	"center"	How it lines up with the link.

Also takes every prop of Base UI's PreviewCard.Popup.

HoverCard, HoverCardTrigger

Prop	Type	Default	Description
delay	number	600	Milliseconds before it opens.

Also takes every prop of Base UI's PreviewCard.Root.