components / 31

marked hover card

a preview should reward curiosity without stealing the page. the link stays native; the extra context arrives by focus or hover.

shadcnnpx shadcn@latest add berkantay/cheez/marked-hover-card

live

meet the names between the lines

hover or tab to a name

<MarkedHoverCard tone="purple" size="medium" character="calm">
  <MarkedHoverCardTrigger href="/people/aya" delay={220}>aya</MarkedHoverCardTrigger>
  <MarkedHoverCardContent>
    <MarkedHoverCardHeader>…</MarkedHoverCardHeader>
    <MarkedHoverCardDescription>type designer</MarkedHoverCardDescription>
    <MarkedHoverCardMeta>12 marks · berlin</MarkedHoverCardMeta>
  </MarkedHoverCardContent>
</MarkedHoverCard>

timing

fast enough to answer, slow enough to mean it

focus opens without delay

reference

api

Base UI preview card, Cheez surface

part	prop	type	default	purpose
Root	`open`	`boolean`	`—`	controlled visibility
Root	`onOpenChange`	`function`	`—`	visibility callback with reason
Root	`tone`	`MarkedHoverCardTone`	`"purple"`	frame ink
Root	`size`	`small \| medium \| large`	`"medium"`	preview width and padding
Root	`character`	`CheezCharacter`	`"calm"`	drawing pressure
Trigger	`delay`	`number`	`600`	open delay in milliseconds
Trigger	`closeDelay`	`number`	`300`	grace period before close
Trigger	`href`	`string`	`—`	native destination
Content	`side`	`Side`	`"bottom"`	preferred placement
Content	`align`	`Align`	`"center"`	anchor alignment
Content	`showArrow`	`boolean`	`true`	directional bridge

behavior notes

the trigger renders a real link and keeps its destination
hover and keyboard focus both open the same preview
the close delay lets the pointer travel safely into interactive preview content
placement flips and shifts near viewport edges
Escape dismisses the preview without moving focus
open timing, dismissal, and collision handling come from Base UI
no Framer Motion is shipped