Hover Card

A preview that opens on hover or focus, for people, links and records behind a name.

Usage

import { HoverCard, HoverCardContent, HoverCardTrigger } from "@zynactra/ui/hover-card"

<HoverCard>
  <HoverCardTrigger render={<a href="/team/randil" />}>@randil</HoverCardTrigger>
  <HoverCardContent>Profile preview.</HoverCardContent>
</HoverCard>

Tune timing with delay and closeDelay on HoverCardTrigger.

Guidelines

Only for previews. Nothing inside it should be required, because touch users never see it.
The trigger must work on its own: clicking the name still goes to the profile.
No forms or buttons inside. If it needs to be interactive, use Popover.

API reference

Built on Base UI's Preview Card. See the Base UI Preview Card docs.

Field

Label, control, help text and error, laid out consistently.

Input

Single-line text entry. In Zynactra, focus turns the border ink and lights a 2px heat line underneath.

On this page

Usage Guidelines API reference